ng-model和ng-repeat关系并理解$ scope [英] ng-model and ng-repeat relation and understanding $scope
问题描述
<！DOCTYPE html> < HTML> < HEAD> < script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js>< / script> < /头> <身体GT; < div ng-app =myAppng-controller =customersCtrl> < UL> <！ - 内部ng-repeat - > < li ng-repeat =x in d> {{$ index}}< input ng-model =val> {{val}}< / li> <！ - 内部ng-repeat - > <峰; br><峰; br><峰; br> <！ - 外部ng-重复 - >外<输入ng-model =val> {{val}}<！ - 外部ng-重复 - > < / UL> < / DIV> <脚本> var app = angular.module（'myApp'，[]）; app.controller（'customersCtrl'，function（$ scope）{$ scope.d = [1,2,3,4,5];}）; < /脚本> < /体> < / html>
在此我有5 ng重复的输入字段，ng-model为val
当我浏览此代码时，我遇到了很多场景
场景1：ng-model = val对于所有重复输入框都是相同的，但是当我在任何重复输入框中更改为什么它没有反映在所有表达式中
方案2：如果在重复输入中范围不同，我们如何参考那个范围。就像val [o]，val [1]，val [2]那样
方案3：如果我在外部输入字段中改变在不改变或弄脏ng重复的输入字段的情况下，它反映了整个表达式。
但是如果我更改任何输入字段，取0，并在外部输入字段中更改值除了0之外的所有输入字段（1,2,3,4）都在改变...
什么是交易这里有范围，为什么范围是这样的？
这是因为ng-repeat创建了子范围，这意味着它是原型的继承自容器范围。如果这对您来说是新鲜的东西，那就去吧..对此有很多解释。
或读这个： 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 =myAppng-controller =customersCtrl as vm>
< ul>
<！ - 内部ng-repeat - >
< li ng-repeat =x in vm.d>
{{$ index}}< input ng-model =vm.val> {{vm.val}}
< / li>
<！ - 内部ng-repeat - >
< br>< br>< br>
<！ - 外部ng-repeat - >
Outer< input ng-model =vm.val> {{vm.val}}
<！ - 外部ng-repeat - >
< / ul>
< / div>
< script>
var app = angular.module（'myApp'，[]）;
app.controller（'customersCtrl'，函数（$ scope）{
this.d = [1,2,3,4,5];
}）;
< / script>
< / body>
< / html>
详细说明
考虑范围如下（尽管实现非常粗略）：
function ParentScope（）{
this。 val =父母;
}
函数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，并且由于子范围已经从父范围原型继承，它们可以读取该属性，因此ng-model尝试读取该属性并绑定到文本框，这就是所有ng重复文本框显示该值的原因。
但是，只要输入ng-repeated文本框，它就会再次尝试写入子范围，但最终会创建一个新属性，隐藏父属性。
我希望能很好地解释这一点。
<!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>
In this i have five ng-repeated input field with ng-model as val there are many scenarioes which i came across when i went through this code
scenario 1: ng-model=val is same for all ng-repeated input boxes,but when i change in any of those repeated input boxes why it is not reflecting in all the expressions
scenario 2: if in repeated input the scopes are different,how can we refer to that scope.Is it like val[o],val[1],val[2] like that
scenario 3: if i'm changing in the outer input field without changing or dirtying the ng-repeated input field it is reflecting all over the expressions. but if i change in any of input field,take 0,and change value in outer input field all input fields(1,2,3,4) except 0 are changing... what's the deal here with the scope and why scope is behaving like this?
This is because ng-repeat makes child scope which means it prototypically inherits from container scope. If this is something new to you, google it.. there are lot of explanations for this. Or read this: https://github.com/angular/angular.js/wiki/Understanding-Scopes
Also, install Angular Batarang in chrome to have a look at scope. This gives you deep insights of what's happening.
Now, how to deal with this in a clean manner- use controllerAs as following:
<!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>
Detailed Explaination
Think of scopes as follows (very coarse implementation though):
function ParentScope(){
this.val = "parent";
}
function ChildScope(){
}
ChildScope.prototype = new ParentScope();
ChildScope.prototype.constructor = ChildScope;
var childScope = new ChildScope();
Explanation of your scenarios:
1: Whenever you start typing in ng-repeated textbox, ng-model tries to write over "val" property of the childScope, which is not available directly over the child object but at the proto of the object.
childScope.val = "child"
This statement makes a new property over child object and hides the parent property.
3: Whenever you type anything in the textbox outside ng-repeat, it changes the "val" in Parent Scope and as the child scopes have been prototypically inherited from parent scope, they can read that property, and hence ng-model tries to read that property and binds to text-box, which is why all ng-repeated text boxes show that value. But, as soon as you type in ng-repeated text-box, it again tries to write over child scope, but ends up making a new property, hiding the parent property.
I hope that explains that well.
这篇关于ng-model和ng-repeat关系并理解$ scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
