如何通过点击复选框按钮切换类？

Question

通过webservice我用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> 

在控制器，

$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 
} 
} 

我当我点击检查obx时需要切换ngclass。 任何人都可以请帮助。

Answer 1

所以，你想div的行为像切换，就点击你的selectTog()将被调用，并增加了因ClassName$scope.mSlected varibale将它移除类

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

现在控制器以同样的方式成为真正的

$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> 

现在控制器

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

Answer 2

这样做：

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

控制器：

$scope.data = true; 
$scope.toggle = function() { 
    $scope.data = !$scope.data; 
} 

当过你点击div就会切换类。

一切顺利。

Answer 3

纳克级的评估样ng-class="productSaleTrue ? onSale : notOnSale"

<div ng-class="mSelected" ng-click="mSelected = !mSelected"> 
    {{showproduct.productName}} 
</div> 

表达这将评估为true，CSS类Onsale的增加与纳克级的元素，如果想要得到假的，其他的CSS类notOnSale将被添加到元素，在你的情况下复选框。

有很多文档和codepen的例子，你可以从中取得！祝你今天愉快！一个链接，只是为知识的缘故：https://appendto.com/2016/03/ng-class-use-cases-action/

从树采取一个实际的例子：

<div ng-controller="mainCtrl" class="list"> 
    <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos"> 
     <input ng-model="todo.completed" type="checkbox"/> 
     <label ng-hide="editing" ng-click="helloWorld()"> 
     {{todo.name}}</label> 
     <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/> 
     <div class="actions"> 
     <a href="" ng-click=" editing = !editing">Edit</a> 
     <a href="" ng-click="saveTodo(todo)">Save</a> 
     <a href="" ng-click="deleteTodo(todo, $index)" class="Delete">delete</a> 
     </div> 
    </div> 
    {{todos}} 
    </div> 

Answer 4

在你的HTML：

<div id="1" class="mSelected" ng-click="myFunc($event)">{{showproduct.productName}} 
</div> 

在你的控制器：

$scope.myFunc = function(event) { 
    $(event.target).toggleClass("your_css_class"); 
}