Как я могу отфильтровать значения select в angularjs?

Question

Я использую стек MEAN в своем приложении с AngularJS как мой frontend.How можно фильтровать поля count and quality, мне нужно drop down list для значений счета в первом поиске выберите входные и качественные значения во втором входе поиска, точно я ожидая фильтровать count and quality values ... Я вещь, которую я сделал ошибку в ng-options и ng-module, поэтому если кто-нибудь знает, что помощь нам решение спасибо .... 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" 

данных нг-модуль: -

Пожалуйста, проверьте мой нг-модуль ли я сделал совершенно или нет.

data-ng-model="searchtable.count" 

data-ng-model="searchtable.quality" 

Я создал Plunker для справки: - My plunker

Например: - если выпадающий список yarn count , carn count ,burn count .. если я выбираю yarn count этой конкретной транзакции нужно только показать .... Пожалуйста, помогите ,

Answer 1

Глядя на your plunker, основная проблема (почему нет вариантов рендеринга в ваших выпадающих списках) является то, что вы ссылаетесь на sryarnorder, которого еще нет. Позднее он определяется в вашей таблице/tr, <tr ng-repeat="sryarnorder in sryarnorders | filter:searchtable">. Это может быть тип. Возможно, вы хотели ссылаться на sryarnorders, который определен на уровне $ scope вашего MainCtrl. Вы можете сделать:

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

который даст вам результаты, которые вы ищете с данными предоставленных Вами.

См updated plunker

Answer 2

Вам нужно настроить вас JSON для работы с массивом внутри массива или вы должны иметь ng-repeat внутри ng-repeat для достижения этого сценария.

SCRIPT и 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>