動的に絞りこみ件数の表示する方法について

現在mongodbから引っこ抜いてきたデータを、チェックボックスにチェックを入れることで、動的に配列の要素数をカウントできるようにしたいと考えています。

angular.jsにて実施しようと思っているのですが、データの総数については、カウントし表示できるものの、絞り込んだ際に、その件数を変動させるというのが上手くいきません。

諸事情ですべてのソースコードをのせることができないのですが、htmlにどう書けばいいか教えていただけませんでしょうか？
イメージはこのサイトに近いです。

http://www.homes.co.jp/mansion/shinchiku/tokyo/city/

<body>

データ総数<div class="filter-result">{{filter.length}}件</div>

<div class="checkbox"><label><input type="checkbox" ng-model="hoken['type1']"><font size ="0">A</font></label></div> <div class="checkbox"><label><input type="checkbox" ng-model="hoken['type2']"><font size ="0">B</font></label></div> </body> <table> <div ng-repeat="user in filter = (users | filter: query)"></div> <tr> <th >氏名</th> <th >住所</th> <th >電話番号</th> ・・ </tr> <tr ng-repeat="user in users| filter: filterByRange">  *filterByRangeはcheckboxで動的に絞込を行うことを定義しているメソッドです。

  <td >{{user.name}}</td>
  <td><a href= "https://www.google.com/maps/place/{{user.jyusho}}" target="_blank">{{user.jyusho}}</a></td>
  <td ><a href="tel:{{user.number}}">{{user.number}}</a></td>

</table>

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

上の方のコードを引用していますが、これで動的に変化する配列のlengthをとれませんか？

html
1<input type='checkbox' ng-model='chk_on'>Women only
2<span> {{filterList.length}} </span>
3<p ng-repeat="u in filterList = (users|myFilter:this)">{{u.name}}</p>

javascript
1var users = [
2  {name:'Taro', gender:'male'},
3  {name:'Hanako', gender:'female'},
4  {name:'Kaori', gender:'female'},
5  {name:'Kenji', gender:'male'},
6  {name:'Sakura', gender:'female'}
7];
8
9var filterList = [];
10
11app.filter('myFilter', function() {
12  return function(list, $scope) {
13    var result = [];
14    list.forEach(function(v) {
15      if (!$scope.chk_on || v.gender === 'female') {
16        result.push(v);
17      }
18    });
19    return result;
20  };
21});

投稿2016/04/20 13:01

DaisukeSakai

総合スコア50

zyunnsalome

2016/04/20 15:11

ありがとうございます。どうも物分りが悪く、ためしてみたのですが、上手く生きません。下の方の方に書いてみたコードを記載したのですが、どこが問題有るかご指南いただけませんでしょうか？

DaisukeSakai

2016/04/21 02:25

すいません。記述が少し間違っていました。動作確認したコードを載せます。必要な個所は修正してください。 ```html <body ng-controller="myCtrl"> <p>{{filterUsers.length}} 件</p> <input type='checkbox' ng-model='chk_on'>5000円以下の商品の件数 <p ng-repeat="user in filterUsers = (users | myfilter:this)">{{user.name}}</p> </body> ``` ```javascript angular.module('app', []) .filter('myfilter', function() { return function(list, $scope) { if(!angular.isArray(list)) { return list; } var results = []; list.forEach(function(user) { if (!$scope.chk_on || user.price < '5000') { results.push(user); } }) return results; } }) .controller('myCtrl',['$scope', function($scope) { $scope.users = [ {name:'hoge',price:'5000'}, {name:'fuge',price:'7000'}, {name:'moge',price:'3000'}, {name:'goge',price:'4000'}, {name:'koge',price:'9000'} ]; $scope.filterUsers = $scope.users; }]) ```

zyunnsalome

2016/04/21 11:44

ありがとうございます。うまくいきました。お手数おかけいたしました。勉強になりました。

行動規範の内容に同意します

質問が少し不明瞭ですが、簡単に言うと checkboxのON/OFFによって ng-repeat に使うリスト（配列）を変化させたいということでしょうか。

カスタムフィルターを含めたシンプルな例を書きますね。
（ng-app、ng-controller の定義部分は省略しています。）

HTML
1<input type='checkbox' ng-model='chk_on'>Women only
2<p ng-repeat="u in users|myFilter:this">{{u.name}}</p>

JavaScript
1var users = [
2  {name:'Taro', gender:'male'},
3  {name:'Hanako', gender:'female'},
4  {name:'Kaori', gender:'female'},
5  {name:'Kenji', gender:'male'},
6  {name:'Sakura', gender:'female'}
7];
8
9app.filter('myFilter', function() {
10  return function(list, $scope) {
11    var result = [];
12    list.forEach(function(v) {
13      if (!$scope.chk_on || v.gender === 'female') {
14        result.push(v);
15      }
16    });
17    return result;
18  };
19});

ご参考になれば。

##修正案

JavaScript
1
2app.filter('myFilter', function() {
3  return function(list, $scope) {
4    var result = [];
5    list.forEach(function(v) {
6      if (!$scope.chk_on || v.gender === 'female') {
7        result.push(v);
8      }
9    });
10    $scope.num_users = result.length;
11    return result;
12  };
13});

HTML
1{{num_users}}

投稿2016/04/20 07:34

編集2016/04/20 13:27

tkanda

総合スコア2425

zyunnsalome

2016/04/20 07:38

不明瞭で申し訳ございません。今書いてくださったfilterは私が作ったものより良いコードだと思ったので、ぜひつかわせていただきたいのですが、配列「数」を動的に取得するにはどうするか教えていただきたいです。現在３件データ登録していた場合、フィルターを掛けても３件と表示されるだけなのですが、それを、１とか２とか０件合致みたいなのをcheckboxにcheckを入れた瞬間に反映させたいです。重ねて申し訳ございませんが、よろしくお願い致します。

tkanda

2016/04/20 13:22

私が書いたカスタムフィルタの修正案を追記しますね。

zyunnsalome

2016/04/20 15:10

ご丁寧にありがとうございます。以下読み替えて書いたのですが、どうも上手くいきません。かなり基本的なことがわかっていない可能性があるのかもしれないのですが、、、例えば、月額通信料を5000円支払っている人に該当する件数のようなものをカウントしたいのですが、以下のように書いてみてダメでした。物分りが悪くて恐縮なのですが、指南いただけませんでしょうか・ html <input type='checkbox' ng-model='chk_on'>5000円以下の商品の件数 <p ng-repeat="user in users|myFilter:this">{{user.name}}</p> {{num_users}} javascript app.filter('myFilter', function() { return function(list, $scope) { var result = []; list.forEach(function(user) { if (!$scope.chk_on || user.price < '5000') { result.push(user); } }); $scope.num_users = result.length; return result; }; }); userというのは、私が、データベースの中で定義している個人データを指す変数です。

tkanda

2016/04/21 01:41

"if (!$scope.chk_on || user.price < '5000') " の部分ですが、user.price は数値ですよね？上記の書き方だと'5000'は string なので、user.price が暗黙的に string に型変換され、２つの文字列を比較する式になってしまいます。条件式を user.price < 5000 に修正する必要があるのではないでしょうか。

zyunnsalome

2016/04/21 11:45

ご指摘いただいた所も含め訂正し、解決いたしました。度々コメント頂き誠にありがとうございました。

行動規範の内容に同意します

あなたの回答