javascript - Angular Js 默认过滤不会在 ng-repeat 中发生

Question

我试图通过将默认值设置为选择框来在加载页面时过滤我的数组值，但它不起作用[在更改选择框时它将过滤]

JSON

[{
        location_id: "2",
        location_name: "location2",
        price: "40",
        product_id: "7",
        product_name: "Burger",
        quantity: "2"
    }, {
        location_id: "3",
        location_name: "location3",
        price: "40",
        product_id: "6",
        product_name: "Dosa",
        quantity: "6"
    }, {
        location_id: "4",
        location_name: "location4",
        price: "40",
        product_id: "5",
        product_name: "cola",
        quantity: "16"
    }
]

选择框的html

<select name="location" class="locationFilter col-md-3 col-md-push-9 col-xs-
12" ng-model="location.location_id">
   <option value="">--Select location--</option>
   <option ng-repeat="item in locationsArray" value="{{item.location_id}}" 
 ng-selected= "item.location_id == defaultLocation">{{item.location_name}}  
 </option>
</select>

用于列表数组的 html

<div class="col-md-3 itemList" ng-repeat="item in productArray | 
filter:location">{{item.product_name}}</div>

在 Controller 中，我为位置选择定义默认值，如下所示

$scope.defaultLocation=3;

任何帮助将不胜感激

Answer 1

使用ng-value ，不是您选择的值(value):

It is mainly used on input[radio] and option elements, so that when the element is selected, the ngModel of that element (or its select parent element) is set to the bound value

使用 value 不会通过 ngModel 的值更新所选项目，但 ng-value 会更新它。

<select name="location" class="locationFilter col-md-3 col-md-push-9 col-xs-
12" ng-model="location.location_id">
    <option value="">--Select location--</option>
    <option ng-repeat="item in locationsArray" ng-value="item.location_id">{{item.location_name}}
    </option>
</select>

而且，由于您使用 location.location_id 作为 ng-model，因此您不需要设置另一个变量来进行初始化($scope.defaultLocation)，只需通过以下方式初始化它:

$scope.location = {location_id: 3};

并且您不需要 ng-selected，因为 ng-model 和 ng-value 会为所选项目完成工作。

这是一个工作的 plunker，向您展示如何:http://plnkr.co/edit/6AXSA8j06gX5yju9a71y?p=preview