如何处理angularjs中的复选复选框

时间:2016-05-25 13:32:51

标签: angularjs

在普通的html表单中,你提交一个表单,你可以访问服务器端的复选框数组,但是在角度上没有表单帖子,我们有视图模型,我们要做的是发布Id的选择实体到服务器端方法,这里是正常处理批处理操作的选中复选框的方式

这是我在ng-repeat循环中的复选框

     <tr  ng-repeat="meeting in vm.meetings" class="odd gradeX">
         <td>
            <input type="checkbox" class="group-checkable icheck" ng-click="vm.selectMeeting(meeting)"/>
        </td>

这是我在angularjs控制器中的功能

 function selectMeeting(meeting) {
        var index = -1;

//check to see if user has check or uncheckd the check box 
        for (var i = 0; i < vm.meetingSelected.length; i++) {

            if (vm.meetingSelected[i].indexOf(meeting.id) > -1) {
                index = i;
            }

        }
//if checked add it to vm.meetingSelected array
        if (index == -1) {
            vm.meetingSelected.push(meeting.id)
        }


//if unchecked remove it form   vm.meetingSelected array
        else {
            vm.meetingSelected.splice(index, 1);
        }

    }

我不喜欢这段代码,我认为应该有更好的方法来选择angularjs中的选中复选框。

有什么建议可以更好地处理angularjs中的复选框吗? 感谢

1 个答案:

答案 0 :(得分:2)

您可以使用t复选框。

ngModel

您可以传递<input type="checkbox" ng-model="vm.meetingSelected[$index]" /> 或跟踪$index的任何对象。这完全取决于背景。

...也许

ngRepeat

因此,当您准备好处理模型时:

<input type="checkbox" ng-model="vm.meetingSelected[meeting.name]" />
<input type="checkbox" ng-model="vm.meetingSelected[meeting.id]" />

或....传递整个事情,让你的后端负责只抓住//only grab the selected meetings === true for(var key in vm.meetingSelected) { if(vm.meetingSelected[key] === true) mySelectedMeetings.push(vm.meetingSelected[key]); } 个选定的会议。