angularjs - 在 Angular JS 中，当使用带有 ng-options 的选择作为过滤器时。如何创建“全部”选项？

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>