在Angular JS中,使用带有ng-options的select作为过滤器.如何创建"全部"选项？

Question

我的控制器中有以下数据:

$scope.breeds = ["Poodle", "Collie", "German shepherd"];

$scope.dogs = [
        { name: "Bingo", breed: "Poodle" },
        { name: "Lassie", breed: "Collie" },
        { name: "Bert", breed: "German shepherd" },
        { name: "Lily", breed: "Poodle" },
        { name: "Obi-Wan", breed: "Collie" }
    ];

这是我的HTML:

<select ng-model="query.breed" ng-options="breed for breed in breeds">                                    
    <option value="">All breeds</option>
 </select>

   <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Breed</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="dog in dogs |filter:query">
                <td>{{dog.name}}</td>
                <td>{{dog.breed}}</td>
            </tr>
        </tbody>
    </table>

一切正常 - 当我选择Collie时,会显示品种为=="Collie"的物品,等等.但我无法弄清楚如何使"所有品种"选项有效.

Answer 1

使用ngOptions时,value=""将模型设置为null与其不兼容filter.你可以只使用ngRepeat.

<select ng-model="query.breed">
    <option value="">All breeds</option>
    <option ng-repeat="breed in breeds" value="{{breed}}">{{breed}}</option>
</select>