angularjs에서 선택 값을 필터링 할 수 있습니까?

Question

내 프론트 엔드로 AngularJS를 사용하여 응용 프로그램에서 평균 스택을 사용하고 있습니다. 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> 

.

는 updated plunker

Answer 2

당신은 당신이 JSON 배열의 내부 배열 작업을하거나 그 시나리오를 달성하기 위해 ng-repeat 내부 ng-repeat가 있어야 사용자가 필요 참조하십시오.

스크립트와 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>