Angular 1.5併爲動態生成的選擇設置選定的選項？

我有嵌套的數據對象，我想根據他們選擇的過濾器顯示給用戶。我對角度有點新，但發現如何解決這個問題已經花了我一段時間，並沒有什麼好的。Angular 1.5併爲動態生成的選擇設置選定的選項？

<tr ng-repeat="stockItem in stock | filter : stockFilter "> 
    <td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td> 
    <td>{{stockItem.sku}}</td> 
    <td> 
    <select class="form-control"> 
    <option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" 
      value="{{supplierOrderStock.supplierId}}" > 
       £{{supplierOrderStock.price}} 
     </option> 
    </select> 
    </td> 
</tr>

我在頁面頂部有複選框，當您選中或取消選中它們時，下拉列表會更新過濾的數據。

問題是SELECTED下拉是隨機的，通常是在初始渲染時選擇的第一個。

我只想要最便宜的值顯示在下拉列表中，並且數據排序的方式始終是第一個選擇選項。

如何設置下拉選擇值，對於每個嵌套重複要麼是最便宜的一個，要麼只是總是第一個下拉？

來源

2017-03-15 ppumkin

你可以嘗試使用NgOption指令代替：

<div class="col col-50"> 
    <span>Orientation</span> <br>    
    <select name="orientation" id="orientation" ng-options="option.label for option in data.filters.basics.orientations track by option.id" ng-model="data.selectedOrientation"> 
    </select> 
</div>

在我的情況下data.selectedOrientation是默認的NG-模型，我不得不設置控制器：

$scope.data.selectedOrientation = $scope.data.filters.basics.orientations[($scope.data.selections.basics.orientations[0]-1)]

來源

2017-03-15 16:21:31 uTombou

謝謝回答，但我試過幾次，無法得到它的工作我想要的方式.. 。 – ppumkin

在瞭解了更多內容之後，我終於意識到，如果所有數據都在模型和集合中進行存儲和過濾，那麼將會更容易。

<select class="form-control" ng-show="stockItem.supplierStockFiltered.length > 0" 
     ng-model="stockItem.selectedSupplier" 
     ng-options="option as getSupplierDropDownText(option) for option in stockItem.supplierStockFiltered track by option.price"></select> 
<span ng-show="stockItem.supplierStockFiltered.length == 0 || stockPackItem.supplierStockFiltered == null "> 
    No Stock 
</span>

所以當載入數據或當過我點擊任何複選框，我只是用angular.forEach(在控制器中設置基於什麼都我過濾掉所選擇的項目。我綁定的實際兩個字段也不包含從服務器返回的數據。但在JS中，您可以在HTML綁定之前動態添加這些字段，並且效果很好！

HTML更清晰，我對模型有更好的控制。

一天結束之後，我不得不這樣做，因爲現在我需要保存所有選定的下拉值......而現在因爲選定的項目被綁定到模型..它的簡單易用性。我只是序列化模型並使用服務器上的數據。

來源

2017-03-17 10:27:48 ppumkin

如果你不想改變你的DOM元素僅僅指剛一NG-模型添加到它

<tr ng-repeat="stockItem in stock | filter : stockFilter "> 
    <td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td> 
    <td>{{stockItem.sku}}</td> 
    <td> 
    <select class="form-control"> 
    <option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" ng-modal="yourModelForThisDom" 
      value="{{supplierOrderStock.supplierId}}" > 
       £{{supplierOrderStock.price}} 
     </option> 
    </select> 
    </td> 
</tr>

來源

2017-03-17 10:49:08

Angular 1.5併爲動態生成的選擇設置選定的選項？

回答

相關問題