2016-03-10 1 views
0
<table class="table"> 
<thead> 
      <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th> 
      <th> Name </th> 
     </thead> 
     <tr ng-repeat="x in items"> 
      <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)" 
          /></td> 
      <td>{{x.name}}</td> 
      </tr> 
     </tr> 
    </table> 

Как я могу получить все item.id, когда я нажимаю кнопку «selectall()»?запускает все флажок при выборе checkall в angularjs

Кроме того, можете ли вы предложить мне подходящий синтаксис ng-модели для флажка ng-repeat?

Спасибо, Раджа K

ответ

0

Уважаемый,

Вот это просто помогает исх. на ваш вопрос. Я дал сценарий для выбора всех записей. Следовательно, измените его в соответствии с вашими потребностями.

<button ng-click="selectAll()">select all</button> 
<div ng-repeat="item in items"> 
    <label> 
    {{item.n}}: 
    <input type="checkbox" ng-model="selected[item.id]"> 
    </label> 
</div> 

И в контроллере, просто установите все элементы, чтобы быть правдой в выбранных:

$scope.selected = {}; 
$scope.selectAll = function(){ 
    for (var i = 0; i < $scope.items.length; i++) { 
    var item = $scope.items[i]; 

    $scope.selected[item.id] = true; 
    } 
}; 

Благодарности & Приветствия

0

Взгляните на этот пример, вы можете увидеть как меняются значения флажка,

при использовании флажка использовать ng-change вместо ng- нажмите

// the main (app) module 
 
var myApp = angular.module("myApp", []); 
 

 
// add a controller 
 
myApp.controller("myCtrl", function($scope) { 
 
    
 
    $scope.value1 = "NO"; 
 
    $scope.items = [{ 
 
    id: 1, 
 
    check: "NO", 
 
    name: "A" 
 
    }, { 
 
    id: 2, 
 
    check: "NO", 
 
    name: "B" 
 
    }, { 
 
    id: 3, 
 
    check: "NO", 
 
    name: "C" 
 
    }, { 
 
    id: 4, 
 
    check: "NO", 
 
    name: "D" 
 
    }, { 
 
    id: 5, 
 
    check: "NO", 
 
    name: "E" 
 
    }, { 
 
    id: 6, 
 
    check: "NO", 
 
    name: "F" 
 
    }, { 
 
    id: 7, 
 
    check: "NO", 
 
    name: "G" 
 
    }, { 
 
    id: 8, 
 
    check: "NO", 
 
    name: "H" 
 
    }]; 
 
    $scope.selectAll = function() { 
 
    angular.forEach($scope.items, function(elem) { 
 
     elem.check = $scope.value1; 
 
    }) 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <table class="table"> 
 
    <thead> 
 
     <th> 
 
     <input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}} 
 
     </th> 
 
     <th>Name</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="x in items"> 
 
     <td> 
 
      <input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}} 
 
     </td> 
 
     <td>{{x.name}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

0

var myapp = angular.module('app', []); 
 
myapp.controller('Ctrl', function ($scope) { 
 
    var vm = this; 
 
    vm.data = { 
 
     items: [ 
 
     {id:1,name:"ali",selected: "NO"}, 
 
     {id:2,name:"reza",selected: "NO"}, 
 
     {id:3,name:"amir",selected: "NO"} 
 
     ] 
 
    }; 
 
    
 
    vm.value1 = false; 
 
    
 
    vm.selectAll = function($event){ 
 
    var checkbox = $event.target; 
 
    var selected = "NO"; 
 
     if(checkbox.checked) 
 
      { 
 
      selected = "YES"; 
 
      } 
 
    else { 
 
     selected = "NO"; 
 
     } 
 
    angular.forEach(vm.data.items, function(item) { 
 
      item.selected = selected; 
 
      }); 
 
    
 
      
 
      
 
    
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Ctrl as vm"> 
 
<table class="table"> 
 
<thead> 
 
      <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th> 
 
      <th> All </th> 
 
     </thead> 
 
     <tr ng-repeat="x in vm.data.items"> 
 
      <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)" 
 
          /></td> 
 
      <td>{{x.name}}</td> 
 
      
 
     </tr> 
 
    </table> 
 

 
</div>

Смежные вопросы