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将变为true，因为它会删除类

<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评估类似ng-class="productSaleTrue ? onSale : notOnSale"

的表达式

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

这将评估为true并将css类onSale添加到具有该ng-class的元素中，如果表达式计算为false，则将另一个css类notOnSale添加到元素中，在您的情况下为复选框。 / p>

您可以从中获取大量文档和代码集示例！祝你今天愉快！一个链接，仅仅是为了知识：commit

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

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

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

4 个答案: