24

我有使用 ngRepeater 显示的数组，但是使用此指令我正在使用 ngInit 指令，该指令执行应该返回要显示的对象的函数。一切正常，但是当我添加“新建”按钮时，我将新值添加到数组中，然后函数“SetPreview”仅在我认为应该根据数组值的数量执行时才执行。我怎样才能做到这一点？

用户界面：

<body ng-app>

  <ul ng-controller="PhoneListCtrl">
      <button ng-click="add()">Add</button>
    <li ng-repeat="phone in phones" ng-init="displayedQuestion=SetPreview(phone);">
      {{displayedQuestion.name}}
      <p>{{displayedQuestion.snippet}}</p>
    </li>
  </ul>
</body>

控制器：

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];

    $scope.add = function(){
        this.phones.push({name:'1', snippet:'n'});
    };        
    $scope.SetPreview = function(phone)
    {
        //here logic which can take object from diffrent location
        console.log(phone);
        return phone;
    };
}

示例在这里 - jsfiddle

编辑：
这里是更复杂的示例： -> 现在电话集合是空的，当您单击添加按钮时，新项目被添加并设置为可编辑（您可以更改文本字段中的值）并且当执行 ngRender 时 SetPreview 函数返回可编辑对象（就像预览一样工作）。现在尝试再次单击添加按钮，您可以看到第一项的可编辑值仍然呈现给用户，但我想刷新整个 ng-repeater。

4

3 回答 3

17

您正在运行 Angular 性能功能。

本质上，Angular 可以看到数组中的元素（例如“A”）是同一个对象引用，因此它不会再次调用 ng-init。这是有效的。即使您将旧列表连接到新列表中，Angular 也会看到它是相同的引用。

相反，如果您创建一个与旧对象具有相同值的新对象，则它具有不同的引用并且 Angular 会重新初始化它：执行您正在寻找的错误示例：http: //jsfiddle.net/fqnKt/37/

$scope.add = function(item) {
    var newItems = [];
    angular.forEach($scope.items, function(obj){
        this.push({val:obj.val});
    },newItems)

    newItems.push({val:item})
    $scope.items = newItems;
};

我不推荐小提琴中采用的方法，而是您应该找到与 ng-init 不同的方法来触发您的代码。

于 2013-03-13T14:27:55.630 回答
11

我发现您可以在隐藏块中替换ng-init为角度表达式：{{}}

<body ng-app>

<ul ng-controller="PhoneListCtrl">
    <button ng-click="add()">Add</button>
    <li ng-repeat="phone in phones">
      <span style="display: none">{{displayedQuestion=SetPreview(phone)}}</span>
      {{displayedQuestion.name}}
      <p>{{displayedQuestion.snippet}}</p>
    </li>
  </ul>
</body>
于 2016-12-26T09:28:08.160 回答
3

如果元素中有 ngInit，而后代中有 ngRepeat，则 ngInit 只会运行一次。

要解决此问题，请使用 ngInit 向元素添加 ngRepeat，其表达式重复一次并依赖于相同的数组（和其他依赖项）。

例如：

ng-repeat="_ in [ products ]" ng-init="total = 0"
于 2017-02-21T03:29:05.067 回答