Angular Filtering

Question

I have a form that is divided into sections like so:

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: ""}

all inputs are displayed with 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>

how would I implement a filter that will display only the chosen section. For example: If I press the education button then show only 'faculty' and 'high school'

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

Please provide suggestion for it.

Answer 1

You can show different div containers by setting a certain variable by using your button, in this case "tab". Then only the dif with the according tab-value will be shown by testing the value of "tab" with 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

Instead of using the built-in filter module, I would create a custom filter that returns a boolean indicating whether the item should be shown or not (using ng-show).

Continue having your <li>'s set the filterBySection model.

Change the div with the ng-repeat to something like:

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

Then on your angular.module object, add a filter like:

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