dependent ng-models inputbox and select Angular js

Question

I am having one text box and one dropdown. I want filtering in ng-repeat section based on both of the above control.

Means if i select name in dropdown and in text box as I typing the filtering should work based on name and if in dropdown if i select EployeeID then filtering should be work based on Employee.

<input id="txtSearchText" ng-model="searchText"/>
<select>
    <option>name</option>
    <option>EmployeeID</option>
</select>

<div ng-repeat="u in users">
name :  {{u.name}}  ||  EID: {{u.eid}}  : 
<!-- here i want result -->
</div>

This might help stackoverflow.com/questions/17319645/…

domakas
– domakas

2014-07-23 14:29:48 +00:00
Commented Jul 23, 2014 at 14:29 — domakas
– domakas, Commented Jul 23, 2014 at 14:29

glandrum101 · Accepted Answer · 2014-07-23 15:33:40Z

The link that domakas directed you to above should help, but the example is slightly different since it filters using 3 different text input boxes.

You are missing a few things here. The first thing is you need to apply a filter to in the ng-repeat for the users div.

<div ng-repeat="u in users | searchText">

The problem that you run into here, which I am sure you are aware of is that it will filter on all of the values in the users array. You seem to want to only filter on the value in the users array that the dropdown has specified. This means we will have to tie the filter to the dropdown in some fashion to make it dynamic.

The way I would do this is to make the filter an object and not just pure text.

$scope.searchText = {name: '', eid: ''};

Now you need to have the model of your input box tied to this object, but where it stores the value needs to be dynamic based on what the value of the dropdown

<input id="txtSearchText" ng-model="searchText[filter]" />
<select ng-model="filter">
    <option value="name" selected>name</option> 
    <option value="eid">EmployeeID</option>
</select>

The above code will store the value of the dropdown in the correct value of the searchText object. This means that the filter will now use this object to filter out the results in the users div instead of just a string, which it would compare to the full JSON object.

Edit:

Added a watch on the 'searchText' object to clear the other value if the dropdown is switched. Without this the old filter value was still in the 'searchText' object, which caused it to filter on both values.

    $scope.$watch('filter', function() {
        if($scope.filter == "eid") {
            $scope.searchText.name = '';
        } else {
            $scope.searchText.eid = '';
        }
    });

Here is a JSFiddle with a working example:

http://jsfiddle.net/glandrum101/NM5A5/1/

Collectives™ on Stack Overflow

dependent ng-models inputbox and select Angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related