使用ng-options隐藏select-list中的未定义值

Question

我已经显示了如下选择列表：

<select class="form-control" ng-model="primaryEmail" ng-options="e.email for e in emails" ng-change="changePrimaryEmail()"></select>

$ scope.emails绑定到使用ng-repeat的文本框。

$scope.emails=[{"id":1,"customerID":1,"email":"a@test.com","toDelete":0,"isPrimary":false},{"id":10,"customerID":1,"email":"b@test.com","toDelete":0,"isPrimary":false},{"id":11,"customerID":1,"email":"c@test.com","toDelete":0,"isPrimary":true},{"customerID":1,"toDelete":0}];

<div ng-repeat="em in emails">
<input type="email" ng-model="em.email" />
</div>

当我添加新文本框时，如果未定义，则下拉列表不应显示其值。

Answer 1

您可以按如下方式使用自定义过滤器：

ng-options="e.email for e in (emails | hideUndefined)"

过滤

app.filter('hideUndefined', function() {
    return function(items) {
        var filtered_items = [];

        //iterate over all emails
        for(var i = 0; i < items.length; i++) {
            //if not undefined, add to filtered_items array
            if(items[i].email !== undefined) {
                filtered_items.push(items[i])
            }
        }
        return filtered_items;
    }
})

Answer 2

我认为你应该使用emails而不是$scope.emails这样：

<select class="form-control" ng-model="model.primaryEmail" ng-options="e.email for e in emails" ng-change="changePrimaryEmail()"></select>

<div ng-repeat="em in emails">
<input type="email" ng-model="em.email" />
</div>