如何在Html中的下拉菜單中訪問匹配的數據？

我想從angularjs訪問匹配的數據，如：如何在Html中的下拉菜單中訪問匹配的數據？

下面一個是列表，我想訪問：

$scope.orderStatus = [ 
    { os: 'Open', value: 1 }, 
    { os: 'Completed', value: 2 }, 
    { os:'Cancelled',value: 3 }, 
    { os: 'Rejected', value: 4 } 
]

下面一個是用於訪問列表元素。

<tr ng-repeat="order in orders" ng-if="order.OrderStatus==2">

，另一個在下面是我的下拉列表中。

<div class="tab"> 
    <input type="radio" id="tab-1" name="tab-group-1" checked> 
    <label for="tab-1"> 
    <select style="background: DarkSlateGrey; border-bottom: 2px; border-bottom-width: 4px; border-bottom-style: none; z-index: 2; text-align: center; position: absolute; top: 1px; left: 1px; Width: 98px; height: 25px; "> 
     <option value="orders">Order</option> 
     <option value="open">Open</option> 
     <option value="complete">Completed</option> 
     <option value="cancel">Cancelled</option> 
     <option value="reject">Rejected</option> 
    </select> 
</label>

如何使用模式結合它以及如何訪問個人信息，當我點擊特定的順序元素？

來源

2017-02-16 Ankit Raman

你能解釋一下嗎？ '如何將其與模態綁定，以及當我點擊特定訂單元素時如何訪問各個細節？' – Sravan

它會更好，如果你可以分享小提琴 –

@Sravan假設，當我點擊下拉菜單中的「完整」，那麼它應該顯示完整列表中的匹配數據等等。如何糾正上面的問題，以便它可以訪問點擊數據。 –

Accrdng我的看法，以烏爾prblm BLW解決方案將工作

添加NG-模型=「someVariable」在選擇標籤..所以，當你選擇的任何下拉值，那麼就會選擇和someVariable正在具有該值。使用該變量並訪問其他東西。

來源

2017-02-16 09:28:18 chandran

謝謝你，我以你的方式做了。現在我想訪問所有列表中的所有數據（打開，完成，取消，拒絕）。我能做到這一點嗎？ –

爲了獲得angularJs的威力，您必須使用允許two-way binding成角度的model。

這是您的問題的解決方案。

這將是主要變化。

<select ng-model="selected"> 
    <option ng-repeat="option in orderStatus" value="{{option.value}}">{{option.os}}</option> 
</select>

1）在上面的代碼中，我分配給ng-model="selected"選擇框保持該選擇的值。

2）我重複ng-options從你的對象，所以價值將動態。

<ul> 
    <li ng-repeat="x in orders | filter : selected"> 
    {{ x.Name }} 
    </li> 
</ul>

3）I重複orders和使用所選擇的值用於angular filter。使訂單將根據該值被過濾

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="namesCtrl"> 
 

 
<div class="tab"> 
 
    <input type="radio" id="tab-1" name="tab-group-1" checked> 
 
    <label for="tab-1"> 
 
    <select style=" border-bottom: 2px; border-bottom-width: 4px; border-bottom-style: none; z-index: 2; text-align: center; position: absolute; top: 1px; left: 1px; Width: 98px; height: 25px; " ng-model="selected"> 
 
     <option value="">ALL</option> 
 
     <option ng-repeat="option in orderStatus" value="{{option.value}}">{{option.os}}</option> 
 
     
 
    </select> 
 
</label> 
 
</div> 
 
{{selected}} 
 
<ul> 
 
    <li ng-repeat="x in orders | filter : selected"> 
 
    {{ x.Name }} 
 
    </li> 
 
</ul> 
 

 
<p>All these Order have OrderStatus. {{selected}}</p> 
 

 
</div> 
 

 
<script> 
 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
 
$scope.orderStatus = [ 
 
    { os: 'Open', value: 1 },{ os: 'Completed', value: 2 },{os:'Cancelled',value: 3 }, { os: 'Rejected', value: 4 } 
 
] 
 
    $scope.orders = [ 
 
     { OrderStatus: 2 , Name: 'order1'}, 
 
     { OrderStatus: 3 , Name: 'order2'}, 
 
     { OrderStatus: 3, Name: 'order3'}, 
 
     { OrderStatus: 1 , Name: 'order4'}, 
 
     { OrderStatus: 2 , Name: 'order5'}, 
 
     { OrderStatus: 4 , Name: 'order6'}, 
 
     { OrderStatus: 2 , Name: 'order7'} 
 
     
 
    ]; 
 
}); 
 
</script> 
 

 

 

 
</body> 
 
</html>

請執行上面的片段

HERE IS A WORKING DEMO

來源

2017-02-16 09:40:01 Sravan

假設當我點擊「全部」時，如何在同一地點訪問列表中的所有數據（打開，完成，取消，拒絕）？ –

添加同樣的回答 – Sravan

@Ankit，查看更新的答案 – Sravan

使用ng-options屬性爲選擇和ng-model結合您的搜索屬性與選定的值。然後按filter的搜索值篩選您的訂單，或按照您的建議僅顯示ng-if所需的值。

<select ng-model="searchParams.OrderStatus" ng-options="status.value as status.os for status in orderStatus"></select>

現在$scope.searchParams.OrderStatus包含所選的訂單狀態。使用它在ng-repeat

<tr ng-repeat="order in orders | filter: searchParams">

來源

2017-02-16 09:47:50 TheSameSon

假設當我點擊「全部」時，如何在同一個地方訪問列表中的所有數據（打開，完成，取消，拒絕）？ –

只需清除您正在過濾的值 'All' – TheSameSon

如何在Html中的下拉菜單中訪問匹配的數據？

回答

相關問題