Question

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
  <script src="example.js"></script>
  <script src="checklist-model.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="DemoCtrl">
    <label ng-repeat="role in roles">
      <input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role.text}}
    </label>
    <button ng-click="user.roles=[];" style="margin-right: 10px">Uncheck all</button>
    <button ng-click="checkNth(0)">Check first</button>
    <button ng-click="checkAll()">Check all</button>

    <pre>{{ user.roles | json }}</pre>
  </div>
  <script>
    angular.module('plunker', ['checklist-model']);
    var DemoCtrl = function($scope) {
      $scope.roles = [{
        id: 1,
        text: 'guest'
      }, {
        id: 2,
        text: 'user'
      }, {
        id: 3,
        text: 'customer'
      }, {
        id: 4,
        text: 'admin'
      }];
      $scope.user = {
        roles: [$scope.roles[1]]
      };

      $scope.checkAll = function() {
        // this first method doesn't work
        //$scope.user.roles = $scope.roles; 

        // this one work
        for (i = 0; i < $scope.roles.length; i++)
          $scope.checkNth(i);
      };

      $scope.checkNth = function(i) {
        console.log("first", JSON.stringify($scope.user.roles));
        $scope.user.roles.splice(i, $scope.user.roles.length);
        console.log("second", JSON.stringify($scope.user.roles));
        $scope.user.roles.push($scope.roles[i])
        console.log("third", JSON.stringify($scope.user.roles));
      }
    };
  </script>
</body>

</html>

这里的清单模型没有像我预期的那样按摩。
我对angular js的新手帮助我。
是否需要添加CDN？。

Answer 1

这是一个解决方案，我刚刚将工作作为一个切换工作。如果您希望它以其他方式运行，您可以自己更改。 http://plnkr.co/edit/tm29BSwUoiFKUgytvnHE?p=preview

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-app="plunker" ng-controller="DemoCtrl">
    <label ng-repeat="role in roles">
      <input type="checkbox" ng-model="role.checked" ng-change="toggleUserRole(role)"> {{role.text}}
    </label>
    <button ng-click="uncheckAll();" style="margin-right: 10px">Uncheck all</button>
    <button ng-click="checkNth(0)">Check first</button> 
    <button ng-click="checkAll()">Check all</button>

    <pre>{{ user.roles | json }}</pre>
  </div>
  <script>
    var app = angular.module('plunker',[]); 

    app.controller('DemoCtrl', function($scope) {
      $scope.roles = [{
        id: 1,
        text: 'guest',
        checked: false
      }, {
        id: 2,
        text: 'user',
        checked: false
      }, {
        id: 3,
        text: 'customer',
        checked: false
      }, {
        id: 4,
        text: 'admin',
        checked: false
      }];
      $scope.user = {
        roles: []
      };

      $scope.toggleUserRole = function(role){
        if($scope.user.roles.indexOf(role) == -1){
          $scope.user.roles.push(role);
        } 
        else{
          $scope.user.roles.splice($scope.user.roles.indexOf(role),1);
        }
      };

      $scope.checkAll = function() {
        for (i = 0; i < $scope.roles.length; i++)
          $scope.checkNth(i);
          if($scope.user.roles.indexOf($scope.roles[i]) == -1){
            $scope.user.roles.push($scope.roles[i]);
          } 
      }; 

      $scope.checkNth = function(i) {
        $scope.roles[i].checked = !$scope.roles[i].checked;
        $scope.toggleUserRole($scope.roles[i]);
      }

      $scope.uncheckAll = function() {
        for (i = 0; i < $scope.roles.length; i++)
          $scope.roles[i].checked = false;
          $scope.user.roles = [];
      };

    });
  </script>
</body>

</html>

清单模型不起作用

1 个答案: