Question

我遇到了一些基本的角度数据绑定问题。

我的观点：

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged(selectedPerson)">
    <option value="">All Persons</option>
</select>

我的控制员：

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function(person) {
    console.log(person);
}

这很好用 - 记录选定的名称。

但是，当选择名称时，这只是打印“未定义”

视图：

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged()">
    <option value="">All Persons</option>
</select>

控制器：

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function() {
    console.log($scope.selectedPerson);
}

我是棱角分明的新人，我只是感到困惑。我假设它与函数内部的$ scope的“范围”有关，但我不确定如何排除故障......

Answer 1

评论中已经提到过，但您选择的角色是 A 范围内的成员。不是控制器的{strong> 范围（$scope）。根据页面/应用程序的其余部分，selectedPerson可能位于不同的范围内。假设您在外部/上方使用ng-repeat（作为显示的代码的父级），那么selectedPerson将作为该范围的成员而不是控制器的范围。

范围的工作方式非常简单，但它继承自父母。如果你在控制器的范围内放置一些内容 - 它将是该控制器的最外层范围（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>

使用上面的模板，无论你在控制器中放置$scope，都可以在内部div和select本身中读取。但ng-model虽然不能直接在控制器中读取。

如果您在控制器中执行此操作：

app.Controllers('MainController', function ($scope) {
  $scope.selectedPerson = {};
});

然后，您将在外部作用域上创建一个对象，ng-model将继承并引用该对象。请注意，ng-repeat内的每个选项都将使用 SAME selectedPerson。

我希望这可以解释为什么？

AngularJS选择ng-change功能未找到所选模型

1 个答案: