Угловая Filtering

Question

У меня есть форма, которая разделена на секции, как так:

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> 

Просьба дать вам предложение.

Answer 1

Вы можете показать различные контейнеры div, установив определенную переменную, используя вашу кнопку, в данном случае «вкладку». Тогда будет показано только различие с соответствующим значением табуляции, проверив значение «tab» с ng-show.

// 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> 

Answer 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... 
    }; 
});