AngularJS - reuse filtered data 14615495

by mrajcok

HTML

<div ng-controller="Ctrl">
    <h1>My Foo</h1>
    <ul>
        <li ng-repeat="foo in foos">
            <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
        </li>
    </ul>
    <br />
    <h1>My Bar</h1>
    <ul>
        <li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
    </ul>
    <p ng-hide="filteredBars.length">Nothing here!</p>

</div>

JavaScript

function Ctrl($scope) {
    
    $scope.foos = [{
        name: 'Foo 1'
    },{
        name: 'Foo 2'
    },{
        name: 'Foo 3'
    }];
    
    $scope.bars = [{
        name: 'Bar 1',
        foo: 'Foo 1'
    },{
        name: 'Bar 2',
        foo: 'Foo 2'
    }];
    
    $scope.setBarFilter = function(foo_name) {
        $scope.barFilter = {};
        $scope.barFilter.foo = foo_name;
    }
    
}