<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<!--Inside ng-repeat-->
<li ng-repeat="x in d">
{{$index}} <input ng-model="val">{{val}}
</li>
<!--Inside ng-repeat-->
<br><br><br>
<!--Outside ng-repeat-->
Outer<input ng-model="val">{{val}}
<!--Outside ng-repeat-->
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.d=[1,2,3,4,5];
});
</script>
</body>
</html>场景 1:ng-model=val 对于所有 ng-repeated 输入框都是相同的，但是当我更改任何这些重复输入框时，为什么它没有反射(reflect)在所有表达式中
场景二:如果重复输入的范围不一样，怎么引用那个范围，是不是像val[o],val[1],val[2]之类的
场景 3:如果我在不更改或弄脏 ng-repeated 输入字段的情况下更改外部输入字段，它会反射(reflect)整个表达式。 但是，如果我更改任何输入字段，取 0，并更改外部输入字段中的值，除 0 之外的所有输入字段(1、2、3、4)都在更改... scope 是怎么回事，为什么 scope 会这样？
最佳答案
这是因为 ng-repeat 生成子作用域，这意味着它在原型(prototype)上继承自容器作用域。如果这对您来说是新事物，请用谷歌搜索它。对此有很多解释。 或者阅读:https://github.com/angular/angular.js/wiki/Understanding-Scopes
此外，在 chrome 中安装 Angular Batarang 以查看作用域。这使您可以深入了解正在发生的事情。
现在，如何以干净的方式处理这个问题 - 使用 controllerAs 如下:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl as vm">
<ul>
<!--Inside ng-repeat-->
<li ng-repeat="x in vm.d">
{{$index}} <input ng-model="vm.val">{{vm.val}}
</li>
<!--Inside ng-repeat-->
<br><br><br>
<!--Outside ng-repeat-->
Outer<input ng-model="vm.val">{{vm.val}}
<!--Outside ng-repeat-->
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
this.d=[1,2,3,4,5];
});
</script>
</body>
</html>
详细解释
考虑范围如下(尽管实现非常粗略):
function ParentScope(){
this.val = "parent";
}
function ChildScope(){
}
ChildScope.prototype = new ParentScope();
ChildScope.prototype.constructor = ChildScope;
var childScope = new ChildScope();
场景说明:
1:每当您开始在 ng-repeated 文本框中输入时，ng-model 都会尝试覆盖 childScope 的“val”属性，该属性不能直接在子对象上使用，但在 proto对象的。
childScope.val = "child"
此语句在子对象上创建一个新属性并隐藏父属性。
3:每当你在 ng-repeat 之外的文本框中键入任何内容时，它都会更改父作用域中的“val”，并且由于子作用域已经从父作用域原型(prototype)继承，它们可以读取该属性，因此 ng-model尝试读取该属性并绑定(bind)到文本框，这就是为什么所有 ng-repeated 文本框都显示该值的原因。 但是，一旦您输入 ng-repeated 文本框，它就会再次尝试覆盖子范围，但最终会创建一个新属性，隐藏父属性。
我希望这解释得很好。
关于javascript - ng-model 和 ng-repeat 关系和理解 $scope，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42270597/