angularjs-带有ngInit的ngRepeat-ngRepeat不会刷新呈现的值

颜啸

2023-03-14

问题内容：

我有使用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。

问题答案：

您正在遇到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的方法来触发代码。

angularjs-带有ngInit的ngRepeat-ngRepeat不会刷新呈现的值

相关阅读

相关文章

相关问答

相关工具

相关文档