ng-model 不工作 Angular js

Question

我正在尝试在嵌套的 ng-repeat 循环中更新父作用域，但它不起作用！我已经在这两个小时内一直在做这个！

这是我的嵌套循环：

<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

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

在嵌套循环中，当您编写ng-model="loop.year" 时，Angular 会查找此类变量的作用域层次结构并没有找到它，因此它创建它，在嵌套循环的作用域上.

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

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

如果您使用 'Controller As' syntax，您可以一起避免此类问题，这是 Angular 1.2 中的新功能。这种语法使管理范围变量变得更加容易。使用此语法时，您的视图代码如下所示：

<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。

这种处理方式有助于使视图代码更加明确且更易于维护，因为您可以立即看到哪些控制器控制着哪些变量。

Answer 2

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

Answer 3

将此添加到您的代码中：

function MyCtrl($scope) {

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