current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

HTML

<div ng-app="myApp" ng-controller="mainCtrl">

    <div ng-controller="secondCtrl">
        <p>Filtering input:</p>
        <p><input type="text" ng-model="test"></p>
    </div>

    <ul>
      <li ng-repeat="x in names | filter:test | orderBy:'country'">
        {{ (x.name | uppercase) + ', ' + x.country }}
      </li>
    </ul>

</div>

JS:

<script>
    var app = angular.module('myApp', []);
    app.controller('mainCtrl', function($scope) {
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    });
    app.controller('secondCtrl', function($scope) {
    });
</script>

In short this filter is not work.

Rule 1 : Model(test) must be in second controller.

Rule 2 : Data and ng-repeat must be in mainCtrl.

Thanks.

share|improve this question
    
This is right. Thanks @Amit. – jaydip sinh Parmar Oct 21 at 14:19

2 Answers 2

up vote 0 down vote accepted

What you are trying to accomplish is basically, filtering value in parent controller based on child controller's variable.

One way to do this is to expose the test in parent controller.

I made small change to your ng-model attribute.

<div ng-controller="secondCtrl">
    <p>Filtering input:</p>
    <p><input type="text" ng-model="$parent.test"></p>
</div>

I have exposed the same to parent controller, hence the change made in secondCntrl will be exposed to test in parent and your filter works fine.

Here is a Fiddle of it.

share|improve this answer
up vote 0 down vote

Look at that fiddle: https://jsfiddle.net/j3974so0/

The problem is that the test variable in the filter statement is not the same variable declared in the ngModel if the input.

Usually variables are declared in parent scopes and used in children scopes, the opposite of what you want use.

In order to let the father scope to use a variable of the children scope is to register a service that share that variable.

update:

Here is the implementation with a service, following constraints you specified 1. and 2.

https://jsfiddle.net/j3974so0/1/

share|improve this answer
    
This answer is also right.But unfortunately only 1 answer can be mark So Sorry Morels. And Thanks – jaydip sinh Parmar Oct 21 at 14:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.