Javascript 角度滤波
我有一个表格,分为以下几个部分:Javascript 角度滤波,javascript,angularjs,filter,Javascript,Angularjs,Filter,我有一个表格,分为以下几个部分: education: {faculty: "", high_school: ""} experience: {experience_1: "", experience_2: "", experience_3: ""} personalInfo: {id: "", type: "", email: "", password: "", password_new: "", first_name: "", last_name: "",…} skills: {skill_
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>
{{k}}:
{{v}
如何实现只显示所选部分的过滤器。例如:如果我按下“教育”按钮,则仅显示“教员”和“高中”
<li ng-repeat="(a,b) in user" ng-click="filterBySection = ?:{{a}}" ng-model="filterBySection"><a href="#">{{doc_param}}</a></li>
请提供建议。您可以通过使用按钮(在本例中为“选项卡”)设置特定变量来显示不同的div容器。然后,通过使用ng show测试“tab”的值,仅显示具有相应tab值的dif
// 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>
//链接或按钮
//DIVS
描述
{{product.description}}
规格
{{product.specification}}
我将创建一个自定义过滤器,该过滤器返回一个布尔值,指示是否应显示该项(使用ng show
)
继续让您的
设置filterBySection模型
用ng repeat
将div
更改为如下内容:
<div ng-repeat="(k,v) in val" ng-show="k | filterSelection:filterBySection" class="formParameter" >
我所做的,上次我不得不使用这个,我在我的控制器中取了两个列表。一个包含所有行,另一个包含将显示的行。因此,每次您点击一个过滤器按钮时,您都会在应用过滤器的同时从完整列表中重新生成第二个列表;)@多尔:我还可以做些什么,或者您可以提供任何其他信息来帮助我们为您回答这个问题吗?
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...
};
});