如何通過點擊複選框按鈕切換類？

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"); 
}