Tuesday, January 13, 2015

angularJS check box inside a repeater

In the case where you have a table of data populated via an angularJS ng-repeat where a check box is present for each row of data, the following method will populate an
<input
type="checkbox"
name="membersListSelection[]"
value="{{i.MemberNumber}}"
ng-checked="filterData.membersListSelection.indexOf(i.MemberNumber) > -1"
ng-click="toggleMembersListSelection(i.MemberNumber)"
>
$scope.membersListSelection = [];
$scope.toggleMembersListSelection = function (memberNo) {
    var idx = $scope.membersListSelection.indexOf(memberNo);
    if (idx > -1) {
        $scope.membersListSelection.splice(idx, 1);
    }
    else {
        $scope.membersListSelection.push(memberNo);
    }
};
Whenever the user checks an item, the member number is added to the array and whenever the user un-checks an item it is removed. This could also be modified to initialize the checked values from the data as well

No comments:

Post a Comment