どのように私はangularjsの選択値をフィルタリングできますか？

Question

私のフロントエンドにAngularJSを使用してMEANスタックを使用しています。count and qualityフィールドをフィルタリングするには、最初の検索でカウント値を入力する必要があります。私はng-optionsとng-moduleで間違いをした持っているcount and quality values ...私の事をフィルタリングするために期待し、そのいずれかは、私たちに解決ヘルプおかげ.... My Plunker

私のHTMLを知っている場合： -

<div class="col-md-6 form-group form-group-default"> 
    <label>Count</label> <select data-ng-model="searchtable.count" id="count" ng-options="item.count for item in sryarnorder.colorshades" class="form-control"><option value="">All</option></select> 
    </div> 

<div class="col-md-6 form-group form-group-default"> 
    <label>Quality</label> 
     <select data-ng-model="searchtable.quality" id="quality" ng-options="item.quality for item in sryarnorder.colorshades" class="form-control" > 
    <option value="">All</option> 
    </select> 
    </div> 

ng-options： -

ここで私は間違いをしたので、ドロップダウンリストが表示されません。

ng-options="item.count for item in sryarnorder.colorshades" 

ng-options="item.quality for item in sryarnorder.colorshades" 

データ-NG-モジュール： -

私は完璧か行っているかどうか、私のNG-モジュールを確認してください。

data-ng-model="searchtable.count" 

data-ng-model="searchtable.quality" 

私は参考のためにPlunkerを作成している： - たとえばMy plunker

を： - 私は特定のトランザクションのみを表示する必要があるyarn countを選択した場合はドロップダウンリストが.. yarn count , carn count ,burn countであれば....助けてください。

Answer 1

your plunkerを見ると、主な問題（ドロップダウンリストにオプションが表示されない理由）は、あなたがまだ存在しないsryarnorderを参照しているということです。後でテーブル/ tr内に定義されます。<tr ng-repeat="sryarnorder in sryarnorders | filter:searchtable">これはタイプかもしれません。 MainCtrlの$ scopeレベルで定義されたsryarnordersを参照することを意味するかもしれません。あなたが行うことができます：あなたは、あなたが提供したデータと探している結果が得られます

 <select data-ng-model="searchtable.count" id="count" ng-options="item.colorshades[0].count for item in sryarnorders" class="form-control"> 
     <option value="">All</option> 
     </select> 

と

<select data-ng-model="searchtable.quality" id="quality" ng-options="item.colorshades[0].quality for item in sryarnorders" class="form-control" > 
     <option value="">All</option> 
    </select> 

。

あなたは、配列内の配列で動作するようにあなたにJSONをカスタマイズしたり、そのシナリオを実現するためにng-repeat内部ng-repeatを持つべき必要updated plunker

Answer 2

を参照してください。

スクリプトとHTML

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.sryarnorders = [ 
 
    { 
 
    "_id": "573d7fa0760ba711126d7de5", 
 
    "user": { 
 
     "_id": "5721a378d33c0d6b0bb30416", 
 
     "displayName": "ms ms" 
 
    }, 
 
    "__v": 1, 
 
    "colorshades": [{ 
 
     "_id": "573d7fc3760ba711126d7de6", 
 
     "quality": "Home Textiles", 
 
     "count": "yarn count" 
 
    }, 
 
    { 
 
"_id": "579ef3feba3bac040b583b50", 
 
"color": "56a5b6831746bc1c0b391c7c", 
 
"quality": "Hall Textiles", 
 
"count": "carn count" 
 
}], 
 
    "created": "2016-05-19T08:56:00.997Z", 
 
    "actual_delivery_date": "2016-05-19", 
 
    "ex_india_date": "2016-05-19", 
 
    "ex_factory_date": "2016-05-19", 
 
    "po_delivery_date": "2016-05-19", 
 
    "supplier_name": "Fsa", 
 
    "buyer_name": "e21" 
 
    }, 
 
    
 
    { 
 
    "_id": "56ffc6d5ab97a73d1066b798", 
 
    "user": { 
 
     "_id": "56ff7bece2b9a1d10cd074a3", 
 
     "displayName": "saravana kumar" 
 
    }, 
 
    "__v": 1, 
 
    "colorshades": [{ 
 
     "_id": "56ffc723ab97a73d1066b799", 
 
     "quality": "Hall Textiles", 
 
     "count": "burn count" 
 
    }], 
 
    "created": "2016-04-02T13:19:17.746Z", 
 
    "actual_delivery_date": "2016-04-02", 
 
    "ex_india_date": "2016-04-04", 
 
    "ex_factory_date": "2016-04-02", 
 
    "po_delivery_date": "2016-04-02", 
 
    "supplier_name": "Fsa", 
 
    "buyer_name": "Binary hand" 
 
    }, 
 
    
 
    { 
 
    "_id": "56ffc5e0ab97a73d1066b796", 
 
    "user": { 
 
     "_id": "56ff7bece2b9a1d10cd074a3", 
 
     "displayName": "saravana kumar" 
 
    }, 
 
    "__v": 1, 
 
    "colorshades": [{ 
 
     "_id": "56ffc608ab97a73d1066b797", 
 
     "quality": "yarn quality", 
 
     "count": "carn count" 
 
    }], 
 
    "created": "2016-04-02T13:15:12.876Z", 
 
    "ex_india_date": "2016-04-02", 
 
    "ex_factory_date": "2016-04-02", 
 
    "po_delivery_date": "2016-04-02", 
 
    "supplier_name": "Fsa", 
 
    "buyer_name": "e21" 
 
    }]; 
 
    
 
    
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 
    <body ng-controller="MainCtrl"> 
 
    <div class="com-md-6"> 
 
     <div class="col-md-6 form-group form-group-default"> 
 
       <label>Count</label> <select ng-model="searchtable.count" id="count" ng-options="items['count'] for items in sryarnorders[0]['colorshades']" class="form-control"> 
 
       <option value="">All</option> 
 
       </select> 
 
     </div> 
 
     <div class="col-md-6 form-group form-group-default"> 
 
      <label>Quality</label> 
 
      <select ng-model="searchtable.quality" id="quality" ng-options="item.quality for item in sryarnorders[0].colorshades" class="form-control" > 
 
       <option value="">All</option> 
 
      </select> 
 
     
 
     <table ng-table="tableParams" show-filter="true" class="table table-bordered "> 
 
     <thead> 
 
     <tr> 
 
      <th rowspan="2"> S.no </th> 
 
      
 
      <th colspan="2" width="100%"> description </th> 
 
      <th rowspan="2"> Po Delivery Date </th> 
 
      <th rowspan="2"> EX Factory date </th> 
 
     </tr> 
 
      <tr> 
 
      
 
      <th width="20%"> Count </th> 
 
      <th width="20%"> Quality </th> 
 
      </tr> 
 
     </thead> 
 
      <tr ng-repeat="sryarnorder in sryarnorders | filter: searchtable['count']['count'] | filter: searchtable['quality']['count']"> 
 
      <td data-title="'S.No'" sortable="'s_no'" filter="{ 's_no': 'text' }">{{$index + 1}}</td> 
 
       
 
       
 
       <td data-title="'Count'" sortable="'count'" filter="{ 'count': 'text' }"> 
 
       <div style="border-bottom:1px solid #fff;margin-top:13px;" ng-repeat="sryarnorder in sryarnorder.colorshades">{{sryarnorder.count}} 
 
       </div> 
 
       </td> 
 
       <td data-title="'Quality'" sortable="'quality'" filter="{ 'quality': 'text' }"> 
 
       <div style="border-bottom:1px solid #fff;margin-top:13px;" ng-repeat="sryarnorder in sryarnorder.colorshades">{{sryarnorder.quality}} 
 
       </div> 
 
       </td> 
 

 
       
 
       <td data-title="'Po Delivery Date'" sortable="'po_delivery_date'" filter="{ 'po_delivery_date': 'text' }">{{sryarnorder.po_delivery_date | date:'dd-MM-yyyy'}}</td> 
 
       
 
       <td data-title="'EX Factory date'" sortable="'ex_factory_date'" filter="{ 'ex_factory_date': 'text' }">{{sryarnorder.ex_factory_date | date:'dd-MM-yyyy'}}</td> 
 
       
 
      </tr> 
 
      
 
     </table> 
 
    </div> 
 
    </body> 
 

 
</html>