ng-model不工作Angular js

Question

我正在尝试在嵌套的ng-repeat循环中更新父作用域，但它不起作用！我确实已经在这2个小时了！

这是我的嵌套循环：

<div ng-repeat="input in config" style="border: 1px solid #000;">
    <div ng-repeat="inputProperty in input.inputStyle" style="border: 1px solid  #000;">
        <input type="text" style="{{inputProperty.style}}" ng-model="loop.year">Type in Year</div>
</div>

过滤器：

<div ng-repeat="book in products | filter: loop.year">{{ book.bookname }}</div>

小提琴：

http://jsfiddle.net/dcot7eof/

Answer 1

添加$ scope.loop = {};到控制器。您正在设置未定义的属性。 Angular在这些问题上默默地失败了。

Answer 2

将此添加到您的代码中：

function MyCtrl($scope) {

    $scope.loop = {year:""};  // <---- add this

Answer 3

嵌套循环中的

loop.year和过滤器中的loop.year是两个不同的东西。

在嵌套循环中，当您编写ng-model="loop.year"时，Angular会查找此类变量的作用域层次结构而找不到它，因此它会创建它，在嵌套循环的范围内< / em>的

在过滤器中，您正在尝试读取变量，因此Angular会查找变量的作用域层次结构，但找不到它，因为在嵌套循环中创建的变量是向下等级，而不是向上。换句话说，过滤器所在的范围是嵌套循环范围的父级。

正如其他人所说，要解决此问题，请在控制器中添加$scope.loop = { year: '' }。这会将变量添加到控制器的范围。因此，当Angular查找loop.year的范围层次结构时，它会在两种情况下将其解析为同一个变量。

如果您使用Angular 1.2中的新功能'Controller As' syntax，则可以同时避免此类问题。此语法可以更轻松地管理范围变量。以下是使用以下语法查看代码的内容：

<div ng-controller="MyCtrl as ctrl">
    <div ng-repeat="input in ctrl.config" style="border: 1px solid #000;">
        <div ng-repeat="inputProperty in input.inputStyle">
            <input ng-model="ctrl.loop.year">Type in Year</div>
        </div>
    </div>
</div>
<div ng-repeat="book in ctrl.products | filter: ctrl.loop.year">{{ book.bookname }}</div>

请注意ng-controller与原始代码的不同之处，以及变量如何以ctrl作为前缀。您可以选择任何名称代替ctrl。这是控制器方面：

function MyCtrl() {

    this.products = [{
        "bookname": "harryporter",
            "year": "2000"
    }, {
        "bookname": "Sleepless",
            "year": "2003"
    }];

    this.config = [{
        "Title": "YearInput",
            "width": "100",
            "inputStyle": [{
            "style": "background-color:green;"
        }]
    }];

};

$scope已被this取代。但是，this与$scope不同。 this绑定到$scope.ctrl。

这种做法有助于使视图代码更明确，更易于维护，因为您可以立即看到控制器控制哪些变量。