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

Question

采用以下模型：

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 );

为什么这不起作用？当我选中复选框时，它似乎没有到达警报我不确定我是否理解绑定和观看的工作原理？

上下文是我想跟踪分页表中的所有勾选项目，然后提交包含此信息的表单服务器端。

Answer 1

尝试使用内部控制器，例如：

<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 );
    });
});

Answer 2

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