javascript - ng-show 在带有 ng-options 的选择下拉列表中的对象数组上

Question

我正在使用 ng-options 来迭代对象数组，并向 View 显示正确的状态列表，并将我需要的内容绑定(bind)到模型。

该 View 在任何给定时间都可以处于两种状态，一种是空的 workOrder 或已经具有值的 workOrder。

现在，我希望在工作订单返回状态为“A”或“事件”状态的情况下，“已关闭”和“正在处理”状态不会显示在下拉列表中。

我想使用 ng-show 来解决这个问题，但也想知道是否有更合适的方法来解决这个问题。

我的对象:

workOrder.statuses = [
        {
            'Status': 'Open',
            'Code': 'O',
            'Show': true
        },
        {
            'Status': 'Active',
            'Code': 'A',
            'Show': true
        },
        {
            'Status': 'Processing',
            'Code': 'P',
            'Show': true
        },
        {
            'Status': 'Closed',
            'Code': 'C',
            'Show': true
        }
    ];

我正在使用的 HTML:

<select title="Status" class="form-control" id="ddlStatus"
                    ng-options="status.Code as status.Status for status in ctrl.statuses"
                    ng-model="ctrl.model.Status">
</select>

我在尝试使其正常工作时遇到了问题，但似乎没有任何效果，并且在 StackOverflow 中搜索时我无法找到可靠的答案。

非常感谢任何帮助!

Answer 1

首先，您可以像这样过滤选项数组:

<li ng-repeat="status.Code as status.Status for status in ctrl.statuses | filter : {Status: 'Open'}: true">

其次，您可以使用这样的选项填充选择

<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>

因此您可以使用“ng-if”指定来隐藏您不想显示的状态选项

更新:

所以你可以使用过滤器:

<option ng-repeat="status in ctrl.statuses | filter : {Status: '!' + ctrl.model.Status}: true" value='{{status.Code}}'>{{status.Status}}</option>

或者，如果您不想使用 ng-repeat，则可以在选定状态更改时过滤范围内的选项数组。