Angular复选框选择all或从表中选择单个元素

时间:2017-02-01 06:16:29

标签: javascript angularjs checkbox

我在这里有两个场景,一个是用户点击一个单独的元素并提交,另一个是用户点击选择所有按钮并提交,以便根据用户的要求,我想要获取项目' s控制器中的详细信息。

这是我的代码

HTML

        <div >
          <label class="btn btn-info">
            <input ng-model="vm.selectAll" type="checkbox"  name="selectAll" value="allitems" > Select all Items
          </label>
          <button ng-click="vm.purchaseItems(item)" class="btn btn-danger" type="submit" >Purchase selected Items</button>
       <table ng-repeat="item in vm.items">
          <tbody>
              <thead>
                <th ><input type="checkbox" ng-checked="vm.selectAll"/></th>
                <th >Student Id</th>
                <th >Name</th>
                <th >School</th>
             </thead>
              <tr>
                <td></td>
                <td >{{item.studentId}}</td>
                <td >{{item.name}}</td>
                <td >{{item.schoolName}}</td>
            </tr>
            </tbody>

        </table>
     </div>

控制器

 vm.purchaseItems = purchaseItems;

  function purchaseItems(item) {
  console.log(item); 
// I want to log only selected items either single or all based on user call
}

我应该使用指令还是只能在控制器本身中完成?

1 个答案:

答案 0 :(得分:1)

您需要一个变量来保存所选的值,然后使用过滤器函数来返回结果,请参阅小提琴http://jsfiddle.net/SNF9x/296/

this.setUnsetAll = function(selected){
 this.items.forEach(function(ele){
  ele.isSelected = selected;
 }); 
}

this.purchaseItems = function(){
var selectedItems = this.items.filter(function(ele){
return (ele.isSelected);
});

console.log(selectedItems)
}