如何过滤 angularjs 中的选择值？

Question

我在我的应用程序中使用 MEAN 堆栈，AngularJS 作为我的前端。如何过滤 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"

数据-ng-模块：-

请检查我的 ng-module 我是否做得很完美。

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">。这可能是一种类型。您可能打算引用在 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>