如何在Angularjs中将复选框链接到模型?

时间:2014-11-17 16:44:59

标签: angularjs

采用以下模型

ProductItems = [
    {
        ID: "",
        Image: "",
        Selected: null
    }
]

查看:

                <tr ng-repeat="item in ProductItems">
                    <td><input 
                            ng-model="item.Selected"
                            type="checkbox" value="<% item.ID %>" /></td>
                    <td><img width="50" src="<% item.Image %>" /></td>
                    <td><% item.Name %></td>
                </tr>

和控制器:

$scope.$watch( "item.Selected" , function( newVal ){
    alert( "hi" );
    productsSelected.push( newVal );
}, true );

为什么这不起作用?当我选中一个复选框时,它似乎没有达到警报 我不确定我是否理解绑定和观看的效果如何?

上下文是我想跟踪一个pginated表中的所有打勾项目,然后使用此信息提交表单服务器端。

2 个答案:

答案 0 :(得分:0)

尝试使用内部控制器,如:

<div data-ng-controller="MainController">
    <table>
        <tr ng-repeat="item in items" data-ng-controller="InnerController">
            <td><input ng-model="item" type="checkbox" />{{item}}</td>
        </tr>
    </table>
</div> 
angular.module('myApp', [])
.controller('MainController',function($scope) {
    $scope.items = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; 
})
.controller('InnerController',function($scope) {
    $scope.$watch( "item" , function( newVal, oldVal ){
        console.log( newVal, oldVal );
    });
});

答案 1 :(得分:0)

<input type=checkbox ng-model=myCollection.property>
{{myCollection.property}} <!-- shows true or false -->