角度过滤答案

【问题标题】：Angular Filtering角度过滤
【发布时间】：2015-08-24 06:00:52
【问题描述】：

我有一个表格，它被分成如下几个部分：

education: {faculty: "", high_school: ""}
experience: {experience_1: "", experience_2: "", experience_3: ""}
personalInfo: {id: "", type: "", email: "", password: "", password_new: "", first_name: "", last_name: "",…}
skills: {skill_1: "", skill_2: ""}

所有输入都使用 ngRepeat 显示。

 <div ng-repeat="(key, val) in user" >
    <div ng-repeat="(k,v) in val | filter:filterBySection" class="formParameter" >

        <span class="param_label">
            {{k}}:
        </span>

     <span e-class="form-control " class="formParameterValue" editable-text="user.{{key}}.{{k}}" e-name="{{k}}">{{v}}</span>
    </div>   
</div>

我将如何实现只显示所选部分的过滤器。例如：如果我按下教育按钮，则只显示“教师”和“高中”

<li ng-repeat="(a,b) in user" ng-click="filterBySection = ?:{{a}}" ng-model="filterBySection"><a href="#">{{doc_param}}</a></li>

请提供建议。

【问题讨论】：

我做了什么，上次我不得不使用它时，我在控制器中取出了 2 个列表。一个包含所有行，另一个包含将显示的行。因此，每次您点击一个过滤器按钮时，您都会在应用过滤器的同时从完整列表中重新生成第二个列表；）
@dor 还有什么我可以做的，或者您可以提供任何其他信息来帮助我们为您回答这个问题吗？

标签： javascript angularjs filter

【解决方案1】：

您可以通过使用按钮设置某个变量来显示不同的 div 容器，在本例中为“选项卡”。然后通过 ng-show 测试“tab”的值，只显示具有相应 tab-value 的差异。

// Links or buttons
<a href ng-click="tab = 1"> Description</a>
<a href ng-click="tab = 2"> Specifications</a>

// DIVS
<div class ="panel" ng-show="tab === 1">
   <h4>Description</h4>
   <p>{{product.description}}</p>
</div>
<div class ="panel" ng-show="tab === 2">
   <h4>Specifications</h4>
   <p>{{product.specification}}</p>
</div>

【讨论】：

【解决方案2】：

我将创建一个自定义过滤器，而不是使用内置过滤器模块，它返回一个布尔值，指示是否应显示该项目（使用ng-show）。

继续让您的 <li> 设置 filterBySection 模型。

将div 与ng-repeat 更改为类似：

<div ng-repeat="(k,v) in val" ng-show="k | filterSelection:filterBySection" class="formParameter" >

然后在您的 angular.module 对象上添加一个过滤器，例如：

var app = angular.module("app", []);
app.filter('filterSelection', function ($filter) {
    return function (input, section) {
        // insert logic like
        if (section == 'Education' && (input == 'high_school' || input == 'faculty'))
        { return true; }
        // and so on...
    };
});

【讨论】：