使用选项选择角度使用[ng-if]

Question

我正在使用angular 1.5，我正在尝试使用一些逻辑来获取从微软图中获得的数据，这些数据是完全动态的（键和值）并创建一个下拉列表。我使用输入框工作，但似乎无法使用选择框。

可以使用的输入框

<input type="text" name="{{prop.name}}" ng-model="vm.filterValues[prop.name]">
    <div ng-repeat="uniqueValue in vm.schemaExtentionsUniqueValues">
         <div ng-if="uniqueValue[0] == prop.internalName || uniqueValue[0] == prop.name">
              {{uniqueValue[1]}}
         </div>
    </div>

我试图使用不起作用的sementic错误构建的选择框：

 <select name="{{prop.name}}" ng-model="vm.filterValues[prop.name]">
    <span ng-repeat="uniqueValue in vm.schemaExtentionsUniqueValues">
          <span ng-if="uniqueValue[0] == prop.internalName || uniqueValue[0] == prop.name">
              <option value="{{uniqueValue[1]}}">{{uniqueValue[1]}}</option>
          </span>
    </span>
 </select>

数据

任何帮助将不胜感激。干杯！

根据动态属性检查每个数组条目中第一项的值。

Answer 1

我建议将很多逻辑移到控制器中。这使得模板“干净”并将代码放置在一个地方更容易访问的位置。

这基本上意味着在 schemaExtentionsUniqueValues 到达要显示的模板之前对其进行过滤/排序。

schemeExtentionsUniqueValues(propName) {
  // Filter this based on propName passed in;
}

第二个范围可以放入选项btw：

<select name="{{prop.name}}" ng-model="vm.filterValues[prop.name]">
  <span ng-repeat="uniqueValue in vm.schemaExtentionsUniqueValues(prop.name)">
    <option ng-if="uniqueValue[0] == prop.internalName || uniqueValue[0] == prop.name"
      value="{{uniqueValue[1]}}">{{uniqueValue[1]}}</option>
  </span>
</select>

如果您使用控制器来确定 schemaExtentionsUniqueValues 中的内容，那么您可能不需要选项标签上的ng-if，并且可以像平常一样显示。