web-dev-qa-db-ja.com

AngularJS：フィルターされたアイテムの数

チェックボックスがチェックされている場合、リストのサブセットを表示しています。チェックボックスの横にあるXを、選択基準に一致するリストのカウントに置き換えたいと思います。私はすべてを行うプランカーを持っていますが、サブセットをカウントします ここ 。

私のコントローラーは次のようになります。

var app = angular.module('app', []);

app.controller('MainController', function($scope){
  $scope.cbMarvel = true;
  $scope.cbDCComics = true;

  $scope.heroes = [
    {
      id: 1,
      name: 'Iron Man',
      fname: 'Tony',
      lname: 'Stark',
      location: 'Stark Tower',
      comic: 'Marvel'
    },
    {
      id: 2,
      name: 'Batman',
      fname: 'Bruce',
      lname: 'Wayne',
      location: 'Bat Cave',
      comic: 'DC'
    },
    {
      id: 3,
      name: 'Superman',
      fname: 'Clark',
      lname: 'Kent',
      location: 'Metroplis',
      comic: 'DC'
    },
    {
      id: 1,
      name: 'Daredevil',
      fname: 'Jack',
      lname: 'Murdock',
      location: 'Court Room',
      comic: 'Marvel'
    },
    {
      id: 5,
      name: 'Flash',
      fname: 'Barry',
      lname: 'Allen',
      location: 'Speedline',
      comic: 'DC'
    },
    {
      id: 6,
      name: 'Hulk',
      fname: 'Bruce',
      lname: 'Banner',
      location: 'Labratory',
      comic: 'Marvel'
    },
    {
      id: 7,
      name: 'Hawkeye',
      fname: 'Clint',
      lname: 'Barton',
      location: 'Nest',
      comic: 'Marvel'
    },
    {
      id: 8,
      name: 'Thor',
      fname: 'Donald',
      lname: 'Blake',
      location: 'Asgard',
      comic: 'Marvel'
    }
  ];
});

私の見解は次のようになります。

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="[email protected] current" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
     <fieldset>
        <legend>Comments Log</legend>
        <div class="row">
            <div class="col-md-4">
                <input type="checkbox" ng-model="cbMarvel"/> Marvel [X]
            </div>
            <div class="col-md-4">&nbsp;</div>
            <div class="col-md-4">
                <input type="checkbox" ng-model="cbDCComics"/> DC Comics [X]
            </div>
        </div>

        <div class="row">&nbsp;</div>

        <div class="row col-md-10">
            <div ng-if="heroes.length == 0"><b>No Heroes Found!</b>
            </div>
            <div ng-repeat="h in heroes | filter:{comic:'Marvel'}" ng-show="cbMarvel">
                {{ h.name}} - {{h.comic}}
            </div>
            <div ng-repeat="h in heroes | filter:{comic:'DC'}" ng-show="cbDCComics">
              {{ h.name}} - {{h.comic}}
            </div>
        </div>
    </fieldset>
  </body>

</html>
angularjsangularjs-filter
16
jgravois

データをバインドするときにビューモデル自体にそのカウントを設定するか、カウントを返すスコープにメソッドを設定するだけです。

app.controller('MainController', function($scope, filterFilter){
   ....
    $scope.getCount = function(strCat){
      return filterFilter( $scope.heroes, {comic:strCat}).length;
    }
    ...
});

そしてそれを次のように使用します-

  Marvel [{{getCount("Marvel")}}]
  .....
  DC Comics [{{getCount("DC")}}]

Plnkr

あなたがページにいるときにリストが変わらない場合、長さを見つけてビューモデル自体のプロパティにバインドし、ビューで使用することをお勧めします。

 //Set your data model
  $scope.cbMarvel = {value:true, count:getCount('Marvel')};
  $scope.cbDCComics = {value:true, count:getCount('DC')};

そしてあなたの意見では

   <input type="checkbox" ng-model="cbMarvel.value"/> Marvel [{{cbMarvel.count}}]

Plnkr2

データセットが大きい場合は、getCount内でフィルターを使用する代わりに、forEachを使用して、各タイプのカウントを一度に入力します。

実際、フィルターはまったく必要ありません。フィルターを使用して同じリストを反復処理するのは非効率的です。あなたのものは静的リストなので、コントローラ自体で分類してください。

var comics = $scope.comics  = {}; //Dictionary of comics
  //Create the collection here.
  angular.forEach(heroes, function(itm){
    if(!comics[itm.comic]){
     comics[itm.comic] = {name:itm.comic, value:true, count:1, items:[itm] };
     return;
    }

    comics[itm.comic].count++; //Incr count
    comics[itm.comic].items.Push(itm); //Push specific item
  });

ビュー内のすべてのフィルターを削除して、次を実行します。

    <div ng-repeat="h in comics.Marvel.items" ng-show="comics.Marvel.value">
        {{ h.name}} - {{h.comic}}
    </div>
    <div ng-repeat="h in comics.DC.items" ng-show="comics.DC.value">
      {{ h.name}} - {{h.comic}}
    </div>

Plnk3-良い方

15
PSL

ユーザーのリストがデータ変数にあり、クエリモデルを使用してユーザーをフィルターすると仮定すると、次のコードが機能します。

  • 見える人の数：{{(data|filter:query).length}}
  • 総人数：_{{data.length}}_

概要

_{{data.length}}_-合計人数を出力します

{{(data|filter:query).length}}-フィルタリングされた人数を出力します

22
Sajjad Ali Khan

考えられる解決策1：インライン

実際には、フィルタリングされた結果への参照を変数h in filtered.marvel = (heroes | filter:{comic:'Marvel'})に保存できます。これは、_filtered.marvel.length_のように使用できます。

参照： Plunkr

考えられる解決策2：コントローラー内

このコードをコントローラーに移動することもできます。

$scope.filteredHeroes.marvel = $filter('filter')($scope.heroes, {comic:'Marvel'});

、_ng-repeat="hero in filteredHeroes.marvel"_で使用できます

および_{{filteredHeroes.marvel.length}}_

（コントローラの依存関係として$ filterを追加することを忘れないでください）

参照： Plunkr

12
user125661

Countオブジェクトを見つけるには、<scope_obj>.lengthテンプレートで.htmlを使用します。

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

conciergeControllers.controller('GuestMsgPreviewCtrl', ['$scope', 'GuestMessages',
    function($scope, GuestMessages) {
    $scope.guests = GuestMessages.query();
}]);

そして、テンプレート（各guestオブジェクトには、配列オブジェクトであるmessages属性があるため、.lengthはネストされたmessageオブジェクトの数を返します。

<ul ng-repeat="guest in guests">
  <li>[[ guest.messages.length ]]</li>
</ul>
0
Aaron Lelevier