angularjs - 选中所有复选框不会更改选择的对象属性-6ren

angularjs - 选中所有复选框不会更改选择的对象属性

转载作者：行者123 更新时间：2023-12-02 04:49:01

My Code - Plunker

我正在尝试通过使用主复选框来更改我所有list objects 的状态检查所有 objects 并通过从选择元素。

问题是，当我尝试使用“全选”“复选框”对所有 元素 应用更改时，它不起作用。

例如

Example

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

我的代码

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 不起作用？

最佳答案

我稍微更改了您的方法 change 使其工作。

从 Plunker 你可以看到在 master 上改变所有的 child 仍然有旧的值(value)。所以我添加了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;
    }
  }
};