Question

我有使用ngRepeater显示的数组但是使用此指令我正在使用ngInit指令执行应该返回要显示的对象的函数。一切都很完美，但当我添加“新”按钮，我向数组添加新值，然后函数“SetPreview”只执行一次我认为应该执行函数取决于数组值的数量。我怎样才能做到这一点？

UI：

<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;
    };
}

Sample is here - jsfiddle

编辑：
Here is more complicated sample: - ＆gt;现在，电话的集合是空的，当您单击添加按钮时，新项目被添加并设置为可编辑（您可以更改文本字段中的值），并且当执行ngRender时，SetPreview函数返回可编辑对象（它的工作类似于预览）。现在尝试再次单击“添加”按钮，您可以看到第一项的可编辑值仍然显示给用户，但我想刷新整个ng-repeater。

Answer 1

您正在使用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不同的方法来触发你的代码。

Answer 2

我发现你可以在隐藏的块中用角度表达式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>

Answer 3

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

要解决此问题，请将ngRepeat添加到具有ngInit的元素，其表达式重复一次并依赖于相同的数组（以及其他依赖项）。

例如：

require "rails_helper"

RSpec.feature "Home page", :type => :feature do
  let!(:articles) { create_list(:article, 10) }

  scenario "When a user visit it" do
    visit "/"
    expect(page).to have_css('article', count: 10) 
  end
end

angularjs - ngRepeat with ngInit - ngRepeat不刷新渲染值

3 个答案: