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

Question

我正在使用 angular 1.4.8。我想保存 ng-repeat 的过滤结果，并用它来确定是否启用列表底部的 "load more" 按钮。我看过这个问题：

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>

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

那么 "as alias" 范围有规则吗？我已经看到很多示例有效，但我的示例无效，我在这里缺少什么？

编辑：

接受的答案使用 controllerAs 确实可以解决问题。但是，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" 在什么范围内可用

In what scope is ng-repeat "as alias" available

angularjs

ng-repeat