javascript - Angular ng-repeat 忽略嵌套 ng-if

Question

你好，

我尝试仅在客户端用于登录的代码与 Controller 中的 $scope.code 匹配时显示选项。

然后 HTML 应显示与客户端登录所用代码相匹配的选项。

查看:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
            <div ng-if=" 'group' == 'code' ">
                 <option value="{{ group }} ">{{ msg }}</option>
             </div>
</select>
</div>

Controller :

$scope.code = dataFactory.getCode();
$scope.codes = {

 'ABC': 'First option',
 'DEF': 'Second option'
}

应该只显示一个选项，因为客户端无法一次使用多个代码登录

但是，当我运行此程序时，我不断收到两个输入框，而不仅仅是与代码匹配的输入框。

我在这里缺少什么吗？

* 更新 *

我已将代码更新为以下内容，并且仍在打印多个选项:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
        <div ng-if=" group == code ">
            <option value="{{ group }} ">{{ msg }}</option>
        </div>
</select>
</div>

* 更新 * @ieaglle 删除 div 允许 if 语句执行。更新后的 HTML 现在是:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
    <option ng-if=" group == code " value="{{ group }} ">{{ msg }}</option>
</select>
</div>

感谢UUUU!!!

Answer 1

尝试使用 ng-options 代替过滤对象。

http://jsfiddle.net/joshdmiller/hb7lu/

HTML:

<select ng-model="selectedCustomer" ng-options="msg for (group, msg) in filterObjsByProp(codes)"></select>

JS:

$scope.code = 'ABC';
$scope.codes = {

    'ABC': 'First option',
        'DEF': 'Second option'
};

$scope.filterObjsByProp = function (items) {
    var result = {};
    angular.forEach(items, function (value, key) {
        if (key === $scope.code) {
            result[key] = value;
        }
    });
    return result;
}

虽然这有点过分了，但由于一个对象不能有多个同名的属性，所以在选择中你只能有 1 个选项。因此，也许选择不是这里的最佳选择，或者带有键/值对象的数组可能更好。