如何在 Angular JS 中没有 <ng-options> 的情况下向 <select> 添加过滤器？

Question

我有一个select声明

<select ng-model="selectedItem" ng-change="onChange()">
        <option id="{{item.toLowerCase()}}" ng-repeat="item in someArray">{{item}}</option>
    </select>

并希望对选项应用过滤器以在下拉列表中显示不同的值。有任何想法吗？

当使用 ng-options 时很容易（见下文），但现在我似乎无法让它工作。

<select
ng-options="item as (item | filterThatIWant) for item in someArray
ng-model="selectedItem"
ng-change="onChange()>
</select>

基本上我只需要上面的等价物。没有 ng-options.

谢谢

Answer 1

与ng-option相同

<select ng-model="selectedItem" ng-change="onChange()">
    <option id="{{item.toLowerCase()}}" ng-repeat="item in someArray | filterThatIWant">{{item}}</option>
</select>

Answer 2

您可以使用 ng-repeat 作为选项，

<select ng-model="selectedItem" ng-change="onChange()">
    <option id="{{item.toLowerCase()}}" ng-repeat="item in someArray">{{item | filterThatIWant}}</option>
</select>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>


<select ng-app="myApp" ng-controller="namesCtrl"ng-model="selectedItem" ng-change="onChange()">
    <option id="{{item.toLowerCase()}}" ng-repeat="item in names">{{item | myFilter}}</option>
</select>


<script>
var app = angular.module('myApp', []);
app.filter('myFilter', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
        ];
});
</script>

<p>This filter, called "myFilter", will uppercase every ODD character.</p>
</body>
</html>

请使用运行上述代码段

Here is a WORKING DEMO

如何在 Angular JS 中没有 <ng-options> 的情况下向 <select> 添加过滤器？

How to add filter to <select> without <ng-options> in Angular JS?

javascript

select

filter

angularjs

ng-options