Question

I have a movielist being rendered on my page for which my controller code looks like this

angular.module('rentalapp.controllers.rentals', ['restangular'])
.controller('rentalController', ['$rootScope','$scope', 'DataService', function($rootScope, $scope, DataService){
    //$rootScope.obj = {search: []};
    DataService.getRentals().then(function(data){
        $scope.movielist = data;

    });

}])

Everything works fine till I am trying to filter the list using a checkbox filter. I am including filters.html using ng:include. If the filter is part of the data template, everything works fine but if its part of ng:include the filters don't work. I know ng:include creates a child scope but I don't know how to get around this. My filter code looks like this

<input type="checkbox" data-ng-model='search.$' data-ng-true-value='Unrated' data-ng-false-value='' />Unrated</label>

and the data repeater is:

<tr ng-repeat="movie in movielist | filter:search">
          <td>{{$index+1}}</td>
          <td><a href="#/detail/{{movie._id.$oid}}">{{movie.title}}</a></td>
          <td>{{movie.year}}</td>
          <td>{{movie.mpaa_rating}}</td>
          <td><a class="btn btn-success" href="#/edit/{{movie._id.$oid}}">Edit</a></td>
          <td><a class="btn btn-danger" href="#/delete/{{movie._id.$oid}}">Delete</a></td>
        </tr>
Was it helpful?

Solution

As you pointed out, the included html gets it's own scope. To bind to the search property on the parent scope you can use:

<input type="checkbox" data-ng-model='$parent.search.$' />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top