Question

我正在尝试使用主人list更改我objects checkbox的所有状态检查所有objects并通过从中选择所需的状态来更改其属性 select element。

问题在于，当我尝试使用“全部检查”复选框对所有elements应用更改时，它无效。

e.g。

Example

当我在不使用主checkboxes的情况下手动检查所有checkbox时，它正在运行。

我的代码

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;

    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.expand = function(vote) {
       console.log("show");
       $scope.vote = vote;
       $scope.ip = vote.ip;
       $scope.date = vote.created;

    };

    $scope.change = function() {
      for(var i = 0; i < $scope.votes.length; i++) {
        if($scope.votes[i].cb) {
            $scope.votes[i].status = $scope.votes.status;
            $scope.votes[i].cb = false;
        }
          $scope.show = false;
      }
    };

});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam'    

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam'
        }
    ];
    return votes;
}]);

我的HTML

  <body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="check" ng-click=>
           <input type="checkbox" ng-model="master"></input>
        </li>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes">
        <li class="check">
          <input type="checkbox" ng-model="vote.cb" ng-checked="master"></input>
        </li>
        <li  class="created">
            <a href="#" ng-click="expand(vote)">{{vote.created|date}}</a>
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
   </div>
   <br></br>
   <div class="details">
    <h3>Details:</h3>
      <div>DATE: {{date|date}}</div>
      <div>IP: {{ip}}</div>
      <div>STATUS: 
        <select ng-change="change()" ng-init="votes.status='Approved'" 
          ng-model="votes.status" 
          ng-options="status for status in statuses">
        </select>
       <p>{{vote.status|json}}</p>
      </div>
   </div>
  </body>

为什么主人checkbox无效？

Answer 1

我稍微更改了方法change以使其正常工作。

从Plunker你可以看到在 master 上更改所有孩子仍然有旧值。所以我添加了onMasterChange方法

<强> HTML

<input type="checkbox" 
       ng-model="master" 
       ng-change="onMasterChange(master)"></input>

我创建了默认设置：$scope.master = false;

....
 $scope.master = false;

$scope.onMasterChange = function(master){

     for(var i = 0; i < $scope.votes.length; i++) {
      $scope.votes[i].cb = master;
     }
};

$scope.change = function(value) {

  for(var i = 0; i < $scope.votes.length; i++) {

    //if($scope.votes[i].cb == undefined){
     // $scope.votes[i].cb = false;
   // }        

    if($scope.master == true){
       $scope.votes[i].cb = $scope.master;
       $scope.votes[i].status = value;

    }
    else if( $scope.votes[i].cb == true) {
      $scope.votes[i].status = value;
    }
  }
};

参见 Plunker

希望它会有所帮助，

Answer 2

它正在工作，但我相信ng-model优先于ng-checked。如果从复选框中删除ng-model，则ng-checked正在按预期工作。

  <input type="checkbox" ng-checked="master"></input>

http://plnkr.co/edit/q35JlhOVSGxmu6QW8e98?p=preview

然而，重要的是要注意，ng-checked不会更新您的模型，它只会更改复选框的显示。解决这个问题的一种方法是删除主绑定，并在主复选框上使用ng-click调用方法，该复选框会在每个框上更改.cb。

编辑：使用主复选框上的监视工作版本。

http://plnkr.co/edit/3NwGtp1FX8g9bfMrbWU5?p=preview

Check-all复选框不会从select中更改对象属性

2 个答案: