【问题标题】:angular multiple ng-repeat multiple filters角度多个 ng-repeat 多个过滤器
【发布时间】:2017-03-28 08:59:48
【问题描述】:

我有一个带有多个过滤器的多个 ng-repeat 列表。

我使用 (ex:A.value) if (ex:B.value) ,但我想使用多个过滤器。

我想要多个过滤器推荐搜索、技能搜索和语言搜索,

那么搜索结果就是要整改(html div class="panel")

现在推荐搜索过滤器没问题,但技能搜索和语言搜索过滤器只是跨度范围(html span id="language" 和 span id="skill")

如何做多个过滤搜索结果改变整体(html div class="panel")?

angular.js

$scope.recommend=[];
  $http.get('/recommend/ajax').success(function (data, status) {
     $scope.recommend = data;
  });

html

<div ng-controller="recommendCtrl">
<!-- search -->
<div class="col-lg-12" style="margin-bottom:20px;">
    <div class="input-group">
        <span class="input-group-btn">
          <input type="text" class="form-control" placeholder="recommend search" ng-model="recommend_search.name">
        </span>
        <span class="input-group-btn">
          <input type="text" class="form-control" placeholder="skill search" ng-model="skill_search.skill_name">
        </span>
        <span class="input-group-btn">
          <input type="text" class="form-control"  placeholder="language search" ng-model="language_search.languagelv_name">
        </span>
    </div>
</div>

<!-- recommend -->
<div class="panel panel-default" ng-repeat="(key, value) in recommend.recommend  | orderBy:'-id' | filter:recommend_search">
    <div class="panel-body">
        <!-- content -->
        <div class="panel-content">
                <label class="ahr-label_bs">
                    @{{ value.family_name}}@{{value.surname}}
                    <span ng-if="value.sex == 1">♂</span>
                    <span ng-if="value.sex == 0">♀</span>
                </label>
                <span>@{{value.name}}</span>
                <!-- skill -->
                <label class="label-gray">skill</label>
                <span id="skill" ng-repeat="skill in recommend.personnels_skill  | filter:skill_search" ng-if="value.personnels_id == skill.personnels_id">
                              @{{skill.skill_name}}、
                            </span></p>
                <!-- language -->
                <label class="label-gray">language</label>
                <span id="language" ng-repeat="language in recommend.languagelvs  | filter:language_search" ng-if="value.personnels_id == language.personnels_id">
                              @{{language.languagelv_name}}、
                </span>

                <label class="label-gray">country</label><span>@{{ value.country }}</span></p>
        </div>
    </div>
</div>

【问题讨论】:

    标签: javascript jquery html angularjs


    【解决方案1】:

    您可以链接过滤器。

    <div class="panel panel-default" ng-repeat="(key, value) in recommend.recommend  | orderBy:'-id' | filter:recommendSearch | filter:anotherFilter | filter: oneMoreFilter">
    

    【讨论】:

    • &lt;span class="input-group-btn"&gt; &lt;input type="text" class="form-control" placeholder="recommend search" ng-model="recommend_search.name"&gt; &lt;/span&gt; &lt;span class="input-group-btn"&gt; &lt;input type="text" class="form-control" placeholder="skill search" ng-model="anotherFilter.personnels_skill.skill_name"&gt; &lt;/span&gt; &lt;span class="input-group-btn"&gt; &lt;input type="text" class="form-control" placeholder="language search" ng-model="oneMoreFilter.languagelvs.languagelv_name"&gt; &lt;/span&gt;
    猜你喜欢
    • 1970-01-01
    • 2014-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-30
    • 2015-09-15
    • 2015-05-26
    • 1970-01-01
    相关资源
    最近更新 更多