javascript – Angular Js在ng-repeat中没有发生默认过滤

2019年7月28日 193次阅读

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

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>

在控制器中,我定义了位置选择的默认值,如下所示

$scope.defaultLocation = 3;

任何帮助将受到高度赞赏

最佳答案 使用
ng-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

使用值不会按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-model& amp;你不需要ng-selected; ng-value为所选项目执行工作.

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

点赞