Javascript 如何有条件地为Angular JS设置ng选项？ 用例：

我有一个web表单，用户可以选择一个类别，在选择一个类别后，将显示一个带有适当子类别的

现在，我在每种情况下使用

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>

---

但是我认为这太冗长了，有没有办法使它更优雅并缩短标记？

对于可重用指令来说，这是一个很好的例子。至少在这里，你的视野会更加干燥和整洁：

<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>'
  }
})

.directive（'subSelect'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
标签：“@”，
道具：“@”，
产品：'='
},
模板：“”
}
})