javascript - 如何通过单击复选框按钮来切换 ng 类？

Question

通过网络服务，我使用 ngrepeat 来显示复选框。它包含 10 个复选框。复选框是在 div 标签中生成的，未使用 html 输入标签。

在 Html 中，

<div ng-repeat="showproduct in showproducts.ProductList.products" class="col-md-3 mobile-two">
<div id="1" class="mSelected">{{showproduct.productName}}
</div>

在 Controller 中，

$http({
method  : 'POST',
url     : '///',
headers : {'Content-Type': 'application/x-www-form-urlencoded'},
data:$.param({
userId:$localStorage.loginUserDet.LoginStatus.user.userId,
sessionId:$localStorage.loginUserDet.LoginStatus.sessionId,
authToken:$localStorage.loginUserDet.LoginStatus.user.authToken
})
})
.success(function(data)
{
alert("success");
$scope.showproducts= data;
console.log($scope.showproducts);
});

JSON，查看复选框列表

{
"ProductList": {
"code": 0,
"products": [
  {
"productId": 1,
"productName": "Credit Card",
"productStatus": 1
},
  {
"productId": 2,
"productName": "Net Banking",
"productStatus": 1
},
  {
"productId": 3,
"productName": "Saving Account",
"productStatus": 1
},
  {
"productId": 4,
"productName": "Loan",
"productStatus": 1
},
  {
"productId": 5,
"productName": "Insurance",
"productStatus": 1
},
  {
"productId": 6,
"productName": "Certificate Of Deposit",
"productStatus": 1
},
  {
"productId": 7,
"productName": "Prepaid Card",
"productStatus": 1
},
  {
"productId": 8,
"productName": "Investment",
"productStatus": 1
},
  {
"productId": 9,
"productName": "All Products",
"productStatus": 1
},
  {
"productId": 10,
"productName": "Demo",
"productStatus": 1
},
  {
"productId": 11,
"productName": "Remittance",
"productStatus": 1
}
],
"uploadStatus": 1
}
}

我需要在单击检查对象时切换 ngclass。谁能帮忙解决这个问题。

Answer 1

因此，您希望 div 表现得像切换一样，点击您的 selectTog()将被调用并添加 ClassName因为$scope.mSlected varibale 将以与删除类相同的方式变为真

<div id="1" ng-class="(mSelected ? 'ClassName': '')" ng-click="selectTog()">{{showproduct.productName}}</div>

现在在 Controller 中

$scope.mSelected = false; // setting it false by default
$scope.selectTog = function(){
    $scope.mSelected = !$scope.mSelected;
}

如果有ng-repeat怎么办？

删除 ng-class来自 <div>并在函数中添加类。

<div ng-repeat="x in [1,2,3,4]"
    <div id="x" ng-click="selectTog($event)">{{x}}</div>
</div>

现在在 Controller 中

$scope.selectTog = function(){
    $event.target.addClass("ClassName");
}