How to toggle ng class by clicking a checkbox button?

Question

Through webservice i used ngrepeat to show the check box. It contains 10 check box. Check box was produced in div tag not used html input tag.

In Html,

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

In 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, to view the check box list

{
"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
}
}

I need to toggle the ngclass when i click the check obx. Can anyone please help on this.

Answer 1

So, you want to div behave like toggle, on click you the selectTog() will be called and adds ClassName because of $scope.mSlected varibale will become true in the same way it removes the class

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

now in controller

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

What if there is ng-repeat?

remove ng-class from <div> and add class in the function.

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

now in controller

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

Answer 2

Do like this:

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

controller:

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

When ever you click the div it will toggle the class.

All the best.

Answer 3

ng-class evaluates an expression like ng-class="productSaleTrue ? onSale : notOnSale"

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

This would evaluate to true and add the css class onSale to the element with that ng-class, if the expression would evaluate to false, the other css class notOnSale would be added to the element, in your case the checkbox.

There is a lot of documentation and codepen examples that you can take from! Have a nice day! A link, just for the sake of knowledge: https://appendto.com/2016/03/ng-class-use-cases-action/

A practical example taken from treehouse:

  <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

In your html:

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

In your controller:

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