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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

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

AngularJS

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

Q&A

解決済

1回答

5493閲覧

Angularでプルダウンによる絞り込み検索を実現したい

Bicepper

総合スコア11

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

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

AngularJS

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

0グッド

0クリップ

投稿2017/11/13 03:17

編集2017/11/13 03:18

###前提・実現したいこと
お世話になります。
Angularでプルダウンによる絞り込み検索を実現したいのですが、想定している挙動ではありません。
例えば以下のように、valueとnumという2つの数値で絞り込みをする場合、「value=1、num=5」で検索した場合に該当するデータはないのですが、「id='000'」のデータが表示される結果になります。
確認環境:Plunker
http://plnkr.co/edit/IBRDuHYtSCUFV1xNxjh4?p=preview

どのように実装すればよいのでしょうか。
よろしくお願いいたします。

###該当のソースコード
index.html

HTML

1<!DOCTYPE html> 2<html lang="ja" ng-app="TestMode"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 6 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 8 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 9 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 11 <!-- Your application bootstrap --> 12 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 13 <script src="app.js"></script> 14 <title>Title</title> 15</head> 16<body ng-controller="MainCtrl"> 17 <div> 18 <div> 19 <div> 20 <span>value</span> 21 <select class="form-control" ng-model="value_1"> 22 <option ng-repeat="value in product_value" value="{{value}}">{{value}}</option> 23 </select> 24 <span>num</span> 25 <select class="form-control" ng-model="num_1"> 26 <option ng-repeat="num in product_num" value="{{num}}">{{num}}</option> 27 </select> 28 </div> 29 </div> 30 <table> 31 <tr> 32 <th> 33 id 34 </th> 35 <th> 36 name 37 </th> 38 </tr> 39 <tr ng-repeat="products in products | filter:{main:{value:value_1}} | filter:{main:{num:num_1}}"> 40 <td>{{products.id}}</td> 41 <td>{{products.name}}</td> 42 </tr> 43 </table> 44 </div> 45 46</body> 47</html>

app.js

js

1var app = angular.module('TestMode', []); 2 3app.controller('MainCtrl', function($scope, $filter) { 4 $scope.product_value = ["1", "2", "3", "4", "5"]; 5 $scope.product_num = ["1", "2", "3", "4", "5"]; 6 $scope.products = [ 7 { 8 id: "000", 9 name:'A', 10 main:[ 11 { 12 value: "1", 13 num: "1" 14 },{ 15 value: "1", 16 num: "2" 17 },{ 18 value: "1", 19 num: "3" 20 },{ 21 value: "2", 22 num: "4" 23 },{ 24 value: "2", 25 num: "5" 26 } 27 ] 28 },{ 29 id: "001", 30 name:'B', 31 main:[ 32 { 33 value: "5", 34 num: "5" 35 },{ 36 value: "5", 37 num: "4" 38 },{ 39 value: "5", 40 num: "3" 41 },{ 42 value: "4", 43 num: "2" 44 },{ 45 value: "4", 46 num: "1" 47 } 48 ] 49 } 50 ]; 51 52});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こういう書き方もできるのですね。知らなかったです。

下記で動作確認できました

<tr ng-repeat="product in products | filter:{main:{value:value_1,num:num_1}}"> <td>{{product.id}}</td> <td>{{product.name}}</td> </tr>

Linuxのパイプと同様に複数のパイプを使用すると、どんどん絞り込まれてきますがrepeatの範囲がproductsなので元の書き方だと
value=1でfilter=products[0] がHIT
num=5でfilter=products[0]がHITとなりなります。

投稿2017/11/14 00:10

mosapride

総合スコア1480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Bicepper

2017/11/14 00:26

複数条件時はカンマで区切ればいいのですね。 大変参考になります!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問