Question

我有一个选择，我想根据视口更改ng-options显示。这是一个使用两个选择的工作示例，隐藏/显示移动（使用Bootstrap 3类）。 select的样式是使用CSS3的条件，但我想让数据也是有条件的。

<select id="selectSearchLocation"
    class="form-control search-location hidden-xs"
    ng-model="vm.searchLocation"
    ng-options="x.code as x.name +' (' + x.code + ')' for x in vm.searchLocations">
</select>
<select id="selectSearchLocation"
    class="form-control search-location visible-xs"
    ng-model="vm.searchLocation"
    ng-options="x.code as x.code for x in vm.searchLocations">
</select>

您可以看到唯一的区别在于ng-options，显示/格式“as”更改。即如果searchLocations是State对象的数组，那么“Colorado-CO”对于移动设备来说只是“CO”。

这可以通过Angular中的过滤器来处理吗？

Answer 1

有多种方法可以做到这一点。首先想到的是使用函数而不是“as”的文字值。

类似的东西：

ng-options="x.code as searchDisplay(x) for x in vm.searchLocations"

在你的控制器中：

$scope.searchDisplay = function(searchLoc) {
  if (mobile) {
    return searchLoc.code;
  }
  return searchLoc.name + ' (' + searchLoc.code + ') ';
};

使用Angular选择条件ng-options

1 个答案: