javascript AngularJS 选择 ng-change 函数找不到选定的模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20294939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS select ng-change function not finding selected model
提问by snuggles
I'm having trouble with some basic angular databinding.
我在处理一些基本的角度数据绑定时遇到了问题。
my view:
我的观点：
<select
ng-model="selectedPerson"
ng-options="person.name for person in testdataset"
ng-change="personChanged(selectedPerson)">
<option value="">All Persons</option>
</select>
my controller:
我的控制器：
$scope.testdataset = [
{name:"bill"},
{name:"bob"},
{name:"batman"}
];
$scope.personChanged = function(person) {
console.log(person);
}
This works great--selected name is logged.
这很好用 - 选择的名称被记录。
But this simply prints "undefined" when a name is selected
但这只是在选择名称时打印“未定义”
view:
看法：
<select
ng-model="selectedPerson"
ng-options="person.name for person in testdataset"
ng-change="personChanged()">
<option value="">All Persons</option>
</select>
controller:
控制器：
$scope.testdataset = [
{name:"bill"},
{name:"bob"},
{name:"batman"}
];
$scope.personChanged = function() {
console.log($scope.selectedPerson);
}
I'm new to angular, and I'm just perplexed. I'm assuming it's got to do with the, er, "scope" of $scope inside the function, but I'm not sure how to troubleshoot...
我是 angular 的新手，我只是感到困惑。我假设它与函数内 $scope 的呃“范围”有关，但我不确定如何排除故障......
采纳答案by Per Hornsh?j-Schierbeck
It was mentioned in the comments already, but your selectedPerson is a member on Ascope. Not nessisarily thescope of the controller ($scope). Depending on the rest of your page/application, the selectedPersoncould be on a different scope. Say you use a ng-repeatoutside/above (as a parent to your code displayed), then the selectedPersonwill live as a member of that scope, NOT the scope of the controller.
评论中已经提到过，但您的 selectedPerson 是A范围的成员。不一定是控制器 ( )的范围$scope。根据页面/应用程序的其余部分，selectedPerson可能在不同的范围内。假设您使用ng-repeat外部/上方（作为显示代码的父级），那么selectedPerson它将作为该范围的成员，而不是控制器的范围。
The way scopes work is pretty straightforward though as it inherits from its parents. If you place something on the scope of the controller - it will be the outmost scope of that controller (the part of your html marked ng-controller) unless ofcourse that you have already nested that part inside another controller. Finally there is $rootScopewhich would the real out-most scope from which every other scope inherits from.
作用域的工作方式非常简单，因为它继承自其父项。如果您在控制器的范围内放置了一些东西 - 它将会是该控制器的最外层范围（标记为 html 的部分ng-controller），除非您已经将该部分嵌套在另一个控制器中。最后$rootScope，每个其他作用域都继承自哪个真正的最外作用域。
<div ng-controller="MainController">
<div ng-repeat="item in items"> <!-- **This creates a new nested scope** -->
<select ng-model="selectedPerson" ng-options="...">
</select>
</div>
</div>
Using the above template, whatever you put on $scopein your controller can be read in both the inner div and the select itself. The ng-modelthough can not be directly read in the controller though.
使用上面的模板，您$scope在控制器中放置的任何内容都可以在内部 div 和选择本身中读取。该ng-model虽不能直接读取控制器虽然。
If you do this in your controller:
如果您在控制器中执行此操作：
app.Controllers('MainController', function ($scope) {
$scope.selectedPerson = {};
});
Then you will create a object on the outer scope and your ng-modelwill inherit and reference that same object. Beware though, that for each select inside your ng-repeatwill be using the SAMEselectedPerson.
然后您将在外部作用域上创建一个对象，您ng-model将继承并引用该对象。但是请注意，对于您内部的每个选择，您ng-repeat都将使用SAMEselectedPerson。
I hope this explains why?
我希望这能解释为什么？
