javascript - AngularJS ng-models 在转发器中使用原型变量

Question

解释此问题的最佳方法是通过示例，请参见此处：

http://jsfiddle.net/YWVDK/

Javascript

String.prototype.status = {active:false}
String.prototype.name = 'Testing';

var test = function($scope) {
    $scope.rows = [];

    $scope.add = function() {
        $scope.rows.push(new String('test'));
    }
}

HTML

<div ng-app>
    <table ng-controller="test">
        <tr><td colspan="2"><button type="button" ng-click="add()">Add</button></td></tr>
        <tr ng-repeat="row in rows">
            <td>{{row.name}}</td>
            <td><input type="checkbox" ng-model="row.status.active"/></td>
        </tr>
    </table>
</div>

本质上，我想将复选框绑定到行的原型属性（在本例中为active）。

如您所见，如果您多次单击添加按钮并尝试勾选其中一个条目，则所有条目都会被勾选。这只发生在手动引入原型的属性上使用 ngModel 时。

Answer 1

因为原型的属性由所有实例共享并且ng-model是双向数据绑定，所以当您检查 1 个条目时，属性会更新，并且所有条目也会更新，因为它们都在观察同一个属性。

Answer 2

问题是您正在设置.status对象的一个​​实例，{active:false}因此一个实例将反映在所有rows 上的任何更新更改。

如果您设置.status为一个值：

String.prototype.status = false

并使用：

<td><input type="checkbox" ng-model="row.status"/></td>

它会起作用的。实际上，解决您的问题的最简单方法就是删除以下行：

String.prototype.status = {active:false}

Answer 3

当您在prototype函数上添加属性时，它是共享属性。在创建过程中，您必须在每个实例上添加“活动”。你必须这样做：

var test = function($scope) {
    $scope.rows = [];

    $scope.add = function() {
        var test = new String('test');
        test.name = 'Testing';
        test.active = true;
        $scope.rows.push(test);
    }
}

工作小提琴示例：http: //jsfiddle.net/YWVDK/3/