web-dev-qa-db-ja.com

ngRepeat - 表示結果数の制限

私は巨大なAngularJS n00bで、 チュートリアル さえ理解するのが難しいと思っています。このチュートリアルでは、電話を表示するアプリの作成について説明します。私はオンです step 5 そして私はユーザーが見せたい数をユーザーが指定できるようにすることを試みる実験として考えました。ビューは次のようになります。

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

ユーザーが表示したい結果の数を入力できるように、この行を追加しました。

How Many: <input ng-model="quantity">

これが私のコントローラーです：

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

重要な行は次のとおりです。

$scope.phones = data.splice(0, 'quantity');

表示する電話機の数を表すために、数値をハードコードすることができます。 5を入れると5が表示されます。私がしたいのは、ビューからその入力の数値を読み、それをdata.splice行に入れることだけです。引用符の有無にかかわらず試してみましたが、どちらも機能しません。どうやってこれをするの？

javascriptmodel-view-controllerangularjsscope
144
Captain Stack

Angularによってネイティブに提供されているように、もう少し「Angularな方法」は、単純なlimitToフィルタを使用することです。

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

338
Stewie

パーティーには少し遅れましたが、これは私にとって役に立ちました。うまく行けば、他の誰かがそれが役に立つと思う。

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
45
couzzi

すべてのデータを最初に保存する

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 5);
    $scope.allPhones = data;
  });

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

EDIT誤って時計をコントローラの外側に置いていたはずです。

2
shaunhusain

htmlでフィルターを制限する別の方法を次に示します。たとえば、limitTo：を使用するよりも3つのリストを一度に表示したい

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>
2
Rizo

あなたがオブジェクトか多次元配列を持っているならば、これは私の場合よりよく働きます。最初の項目だけが表示され、その他はループ内で無視されます。

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

あなたが望むものに5を変更してください。

1
fdrv

Ng-repeatで限られた数の結果を表示するには、limitToフィルタを使用してください。

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>
0
Rajkiran Shetty