Question

我正在使用角度 1.4.8 。我想保存来自ng-repeat的过滤结果，并使用它来确定是否在列表底部启用“加载更多”按钮。我看过这个问题：

AngularJS - how to get an ngRepeat filtered result reference

还有很多人，他们建议使用ng-repeat中的“as alias”，这是我的代码的样子：

  <ul class="media-list tab-pane fade in active">
    <li class="media">
      <div ng-repeat-start="item in items | limitTo: totalDisplayed as filteredResult">
        {{item}}
      </div>
      <div class="panel panel-default" ng-repeat-end>
      </div>
      <div>
        {{filteredResult.length}}
      </div>
    </li>
  </ul>
  <button ng-click="loadMore()" ng-show="totalDisplayed <= filteredResult.length">
    more
  </button>

但是，我发现在ng-repeat之后，filteredResult.length显示正常，但按钮从不显示。如果我尝试在按钮所在的位置显示filteredResult.length，它将显示为null。

那么“as alias”范围是否有规则？我见过很多例子，但是我没有，我在这里缺少什么？

编辑：

接受的答案使用的控制器确实可以解决问题。但是，charlietfl使用ng-init将filteredResult保存到父作用域的注释也非常简洁，这是我最终在代码中使用的解决方案。

Answer 1

您的<ul class="media-list tab-pane fade in active">或<li class="media">中的某些类可能是具有自己范围的指令的选择器。因此，您可以将filteredResult存储在例如tab-pane's scope，然后尝试在ul代码之外访问其范围。

尝试使用Controller as而不是范围：

angular
  .module('plunker', [])
  .controller('MainCtrl', function() {
    vm = this;
    // make an array from 1 to 10
    var arr = [];
    while (arr.length < 10) {
      arr.push(arr.length + 1)
    };

    vm.items = arr;
    vm.totalDisplayed = 5;
    vm.filteredResult = [];
  });

<body ng-controller="MainCtrl as main">
  {{main.items}}
  <ul class="media-list tab-pane fade in active">
    <li class="media">
      <div ng-repeat-start="item in main.items | limitTo: main.totalDisplayed as filteredResult">
        {{item}}
      </div>
      <div class="panel panel-default" ng-repeat-end>
      </div>
      <div>
        filteredResult = {{main.filteredResult = filteredResult}}
      </div>
    </li>
  </ul>
  <button ng-click="loadMore()" ng-show="main.totalDisplayed <= main.filteredResult.length">
    more
  </button>
</body>

<小时/> http://plnkr.co/edit/drA1gQ1qj0U9VCN4IIPP?p=preview

在什么范围内ng-repeat“as alias”可用

1 个答案: