Question

我希望根据用户选择的过滤器向用户显示嵌套数据对象。我对角度有点新意，但找到如何解决这个问题已经花了我一段时间而且没有真正有任何好处。

  <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下拉是随机的，通常是在初始渲染时选择的第一个。

我只想在下拉列表中显示最便宜的值，以及数据的排序方式始终是第一个选择选项。

如何设置下拉选择值，每个嵌套重复是最便宜的，或者只是总是第一次下拉？

Answer 1

您可以尝试使用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)]

Answer 2

如果你不想改变你的dom元素jsut添加一个ng-model

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

Answer 3

在学习了一点之后，我终于意识到，如果所有数据都在模型和集合中存储和过滤，那将会容易得多。

<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更清晰，我可以更好地控制模型。

我必须以任何方式执行此操作，因为现在我需要保存所有选定的下拉值...现在因为所选项目已绑定到模型..它很容易。我只是序列化模型并使用服务器上的数据。

Angular 1.5并为动态生成的选择设置选定的选项？

3 个答案: