过滤显示所选项目的问题

时间:2015-08-06 08:12:13

标签: javascript html angularjs

我试图按类别开发过滤器项目的示例。下面的代码块显示了按类别过滤的项目列表。

 <div class="form-group">
    <label class="control-label" for="order_id">Filter by Category</label>
    <select class="form-control m-b" name="category" ng-model="item.searchString">
    <option value="">All</option>
    <option ng-repeat="category in item.itemscategory" value="{{category.name}}">{{category.name}}</option>
</select>
</div>

<div class="chat-user" ng-repeat="iteme in item.items | filter:item.filterSearch"
 ng-class="{'text-navy':$first == true}">

        <a id="{{iteme.id}}" 
        href="" ng-click="item.selectitem(iteme)">{{iteme.name}}</a>

</div>

如果我选择列表中的任何项目并更改类别以过滤它们,我希望默认情况下该项目将在列表中显示或选择列表中的第一项。

1 个答案:

答案 0 :(得分:0)

在Js中你可以设置:

$scope.firstItemInTheList= item.itemscategory[0];

要保存第一个项目,还要将其设置为ng-model标记的select

<div class="form-group">
    <label class="control-label" for="order_id">Filter by Category</label>
<select class="form-control m-b" name="category" ng-model="firstItemInTheList">
    <option value="">All</option>
    <option ng-repeat="category in item.itemscategory" value="{{category.name}}">{{category.name}}</option>
</select>
</div>

<div class="chat-user" ng-repeat="iteme in item.items | filter:firstItemInTheList"
 ng-class="{'text-navy':$first == true}">

    <a id="{{iteme.id}}" href="" ng-click="item.selectitem(iteme)">{{iteme.name}}</a>

</div>

如果您未从select选择任何选项,则使用此

过滤器
$scope.firstItemInTheList= item.itemscategory[0];

过滤。