Question

用例：

我有一个网络表单，用户可以选择一个类别，在选定的一个类别中，将显示带有适当子类别的<select>。

现在我每个案例都使用ng-if指令，因此标记块只会在另一个变量之后呈现。

这是我的标记：

    <select class="form-control" ng-if="products.newProduct.category=='PTR'" ng-model="products.newProduct.data.subcategory" ng-options="type for type in products.subcategories.ptr"></select>

   <select class="form-control" ng-if="products.newProduct.category=='Losacero'" ng-model="products.newProduct.data.subcategory" ng-options="type for type in products.subcategories.losacero"></select>

   <select class="form-control" ng-if="products.newProduct.category=='Varilla'" ng-model="products.newProduct.data.subcategory" ng-options="type for type in products.subcategories.varilla"></select>

但我认为这太冗长了，有没有办法让这个更优雅，缩短标记？

Answer 1

这是可重用指令的一个很好的例子。至少在这里你的观点会更加干燥和整洁：

<sub-select products="products" label="PTR" prop="ptr"></sub-select>
<sub-select products="products" label="Losacero" prop="losacero"></sub-select>
<sub-select products="products" label="Varilla" prop="varilla"></sub-select>

指令定义可能如下所示：

.directive('subSelect', function(){
  return {
    restrict: 'E',
    replace: true,
    scope: {
      label: '@',
      prop: '@',
      products: '='
    },
    template: '<select class="form-control" ng-if="products.newProduct.category === label" ng-model="products.newProduct.data.subcategory" ng-options="type for type in products.subcategories.{{prop}}"></select>'
  }
})

Demo

如何有条件地为Angular JS设置ng-options？

用例：

1 个答案: