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

Question

用例:

我有一个 Web 表单，用户可以选择一个类别，然后在选定的类别上显示 <select>将显示具有适当子类别的内容。

现在我正在使用 ng-if每个案例的指令，因此标记 block 将仅在另一个变量之后呈现。

这是我的标记:

    <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

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

<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