清單模型不起作用

-2

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

這裏的清單模型不像我所期望的那樣。
即時通訊新的角js幫助我。
有沒有需要添加CDN ?.

來源

2016-03-03 Vinu K Vincent

請更詳細地說明問題。 – charlietfl

這是一個解決方案，我只是把工作作爲一個切換到現在。如果您希望其他行爲可以自行更改。 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>

來源

2016-03-03 14:01:00

清單模型不起作用

回答

相關問題