###前提・実現したいこと
お世話になります。
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});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/14 00:26