$scope not filtering with other parts of controller in AngularJS

Question

$scope not filtering with other parts of controller in AngularJS

I have a controller that is pretty much an exact copy of the demo from AngularJS. I wanted to add a function to grab some items from an array within the items.

The issue I am running into is that the results are not filtering along with the main part of the controller.

Here is the original part of the controller.

function EmployerListCtrl($scope, Employer) {
    $scope.employers = Employer.query();
    $scope.orderProp = 'age';
    $scope.getEmployerCount = function () {
        return $scope.employers.length;
    };

I added this function.

$scope.getSkillsList = function () {
    var employerArray = this.employers;
    var skillsArray = new Array();
    for (var i = 0; i < employerArray.length; i++) {
        if (employerArray[i].software != undefined || employerArray[i].software != null) {
            for (var j = 0; j < employerArray[i].software.length; j++) {
                skillsArray.push(employerArray[i].software[j]);
            }
        }
    }
    return skillsArray;
};

I also tried to use the same $scope as the main part of the controller, however it also shows just the initial results.

$scope.getSkillsList2 = function () {
    var employerArray = $scope.employers;
    var skillsArray = new Array();
    for (var i = 0; i < employerArray.length; i++) {
        if (employerArray[i].software != undefined || employerArray[i].software != null) {
            for (var j = 0; j < employerArray[i].software.length; j++) {
                skillsArray.push(employerArray[i].software[j]);
            }
        }
    }
    return skillsArray;
};

Here is the contents of the HTML Page. The ng-model="query" is what I am using to filter the ng-repeat.

<div class="container-fluid">
    <p>Set One: {{getSkillsList()}}</p>
    <p>Set Two: {{getSkillsList2()}}</p>
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
            Search: <input ng-model="query">
            Sort by:
            <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
            </select>
            <p>Number of employers in list: {{getEmployerCount()}}</p>
        </div>
        <div class="span10">
            <!--Body content-->
            <ul class="employers">
                <li ng-repeat="employer in employers | filter:query | orderBy:orderProp" class="thumbnail">
                    <a href="#/employers/{{employer.id}}" class="thumb"><img ng-src="{{employer.imageUrl}}"></a>
                    <a href="#/employers/{{employer.id}}">{{employer.name}}</a>
                    <p>{{employer.snippet}}</p>
                </li>
            </ul>
        </div>
    </div>

</div>

javascript
angularjs

Answer 1

I think you are hoping to have the skillsArray automatically shrink or grow based on the ng-repeat filter. That won't work. In this line:

<li ng-repeat="employer in employers | filter:query | orderBy:orderProp" ...>

the results of the filter are not seen by the parent scope, but only by the ng-repeat scopes. In other words, the filter does not alter $scope.employers, so your skills functions will continue to operate on the full employers array received from the server.

One way to accomplish what you want is to define your own filter function, then chain it with the query filter one:

angular.module('myApp', []).
filter('skills', function() {
   return function(filteredEmployers) {
      var skillsArray = [];
      ... do your filtering here ...
      return skillsArray;
   }
});

Then in your HTML:

<li ng-repeat="skills in employers | filter:query | skills">
   {{skill}}
</li>