質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • AngularJS

    571questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • MongoDB

    251questions

    MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,621

zyunnsalome

score 17

現在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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

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;
  };
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 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

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

    キャンセル

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}}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/20 16:38

    不明瞭で申し訳ございません。今書いてくださったfilterは私が作ったものより良いコードだと思ったので、ぜひつかわせていただきたいのですが、配列「数」を動的に取得するにはどうするか教えていただきたいです。

    現在3件データ登録していた場合、フィルターを掛けても3件と表示されるだけなのですが、それを、1とか2とか0件合致みたいなのをcheckboxにcheckを入れた瞬間に反映させたいです。

    重ねて申し訳ございませんが、よろしくお願い致します。

    キャンセル

  • 2016/04/20 22:22

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

    キャンセル

  • 2016/04/21 00: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というのは、私が、データベースの中で定義している個人データを指す変数です。

    キャンセル

  • 2016/04/21 10:41

    "if (!$scope.chk_on || user.price < '5000') "

    の部分ですが、user.price は数値ですよね?上記の書き方だと'5000'は string なので、user.price が暗黙的に string に型変換され、2つの文字列を比較する式になってしまいます。

    条件式を user.price < 5000 に修正する必要があるのではないでしょうか。

    キャンセル

  • 2016/04/21 20:45

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17076questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • AngularJS

    571questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • MongoDB

    251questions

    MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。