2

我的代码 - Plunker

我试图list objects通过使用一个checkbox检查所有的主来更改我所有objects的状态,并通过从 select element.

问题是,当我尝试elements使用“检查全部”“复选框”对所有内容进行更改时,它不起作用。

例如

例子

当我在checkboxes不使用 master的情况下手动检查所有内容时,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不工作?

4

2 回答 2

4

change稍微改变了你的方法以使其工作。

从 Plunker 你可以看到,在master change 上,所有的孩子仍然有旧的价值。所以我添加了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

希望它会有所帮助,

于 2013-10-07T09:35:12.773 回答
1

它正在工作,但我相信 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

于 2013-10-07T09:00:26.487 回答