動的に絞りこみ件数の表示する方法について
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 2,972
現在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"> <!--DBテーブルusersからuserを順に配列-->
*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>
何卒よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
上の方のコードを引用していますが、これで動的に変化する配列のlengthをとれませんか？
<input type='checkbox' ng-model='chk_on'>Women only
<span> {{filterList.length}} </span>
<p ng-repeat="u in filterList = (users|myFilter:this)">{{u.name}}</p>var users = [
{name:'Taro', gender:'male'},
{name:'Hanako', gender:'female'},
{name:'Kaori', gender:'female'},
{name:'Kenji', gender:'male'},
{name:'Sakura', gender:'female'}
];
var filterList = [];
app.filter('myFilter', function() {
return function(list, $scope) {
var result = [];
list.forEach(function(v) {
if (!$scope.chk_on || v.gender === 'female') {
result.push(v);
}
});
return result;
};
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
質問が少し不明瞭ですが、簡単に言うと checkboxのON/OFFによって ng-repeat に使うリスト（配列）を変化させたいということでしょうか。
カスタムフィルターを含めたシンプルな例を書きますね。
（ng-app、ng-controller の定義部分は省略しています。）
<input type='checkbox' ng-model='chk_on'>Women only
<p ng-repeat="u in users|myFilter:this">{{u.name}}</p>var users = [
{name:'Taro', gender:'male'},
{name:'Hanako', gender:'female'},
{name:'Kaori', gender:'female'},
{name:'Kenji', gender:'male'},
{name:'Sakura', gender:'female'}
];
app.filter('myFilter', function() {
return function(list, $scope) {
var result = [];
list.forEach(function(v) {
if (!$scope.chk_on || v.gender === 'female') {
result.push(v);
}
});
return result;
};
});ご参考になれば。
修正案
app.filter('myFilter', function() {
return function(list, $scope) {
var result = [];
list.forEach(function(v) {
if (!$scope.chk_on || v.gender === 'female') {
result.push(v);
}
});
$scope.num_users = result.length;
return result;
};
});{{num_users}}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.38%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/04/21 00:11
2016/04/21 11: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;
}])
```
2016/04/21 20:44