1. 首頁
  2. 問答
  3. 如何過濾angularjs中的選擇值？

如何過濾angularjs中的選擇值？

2016-08-23 92 views
0

我使用MEAN堆在我和AngularJS作爲我front-end.How我可以過濾count and quality領域的應用，我需要drop down list在第一次搜索計數值選擇第二搜索輸入和質量值選擇輸入，正是我期待過濾count and quality values ...我的事情我在ng-options和ng-module做了一個錯誤，因此，如果任何人知道感謝解決方案幫助我們.... My Plunker如何過濾angularjs中的選擇值？

我的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-選項： -

我的東西在這裏，我犯了一個錯誤，這就是爲什麼下拉列表不顯示。

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 , carn count ,burn count ..如果我選擇yarn count特定的交易只需要顯示....請幫助。

來源

2016-08-23 R. Mani Selvam

+0

你所需要的：當你在計數字段中選擇「紗線支數」，那麼質量只有兩個選項「家紡，霍爾紡織品」吧？ – DsRaj

+0

感謝您的評論，是的，如果我們選擇紗線數量的特定行需要顯示....你可以請在編輯器中編輯並給我們...因爲它是更好的方式來了解.... –

回答

0

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

來源

2016-08-23 08:08:20 Wake

+0

感謝您的寶貴答案，下拉式是完美的，但它不是過濾價值，如果我們選擇紗線計數，它不是過濾，表格顯示爲'Empty或Nill'，所以你可以請同樣的幫助。 ...並更新你的掠奪者以及謝謝噓多了...... –

+0

嘿嗨@喚醒上述評論的任何解決方案？ –

0

你需要定製您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="[email protected]" 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>

來源

2016-08-23 10:49:16

+0

嗨你好，謝謝你的回答，但爲什麼只有兩個交易的數量和質量值顯示在該搜索select元素？ ......那麼爲什麼第三次'carn count and yarn quality'沒有出現？任何想法和解決方案，請...... –

+0

@ R.ManiSelvam這就是我告訴ablove。爲了在數組內部實現'ng-repeat'，你可以使用兩次或其他任何方式來定製數組。請參閱：http://stackoverflow.com/questions/24944582/angularjs-ng-options-select-from-nested-json-array –

相關問題

 相關問題