AngularJS-在每个$ scope.function调用中重新定义$ scope中的数组

Question

So for my website I am trying to set up some custom functions with AngularJS.

My output is as follows:

<div data-ng-repeat="filter in menu.filters" data-ng-controller="MenuController">
    <label>{{filter.title}}</label>
    <input type="checkbox" data-ng-click="setSelectedFilter()" />
</div>

My controller looks like this:

.controller("MenuController", ['$scope','$log', function($scope, $log) {
  $scope.selectedFilters = [];

  $scope.setSelectedFilter = function () {
      var stub = this.filter.stub;
      if (_.contains($scope.selectedFilters, stub)) {
        $scope.selectedFilters = _.without($scope.selectedFilters, stub);
      } else {
        $scope.selectedFilters.push(stub);
      };
      $log.log($scope.selectedFilters);
      return false;
  };
}])

The problem I am having is that whenever I log $scope.selectedFilters at the beginning of $scope.setSelectedFilter , it's always a blank array. When I log $scope.selectedFilters at the end of my function, it contains the value I pushed there, but it doesn't hold onto it.

If I define $scope.selectedFilters as holding several values, those values show up in place of an empty array, like the array is getting re-built from the original declaration each time my function runs.

How do I get the $scope.selectedFilters array to hold on to the values I push to it from the $scope.setSelectedFilters function?

Here is a fiddle showing the problem: http://jsfiddle.net/HAz3p/

Answer 1

You are initializing new controller for every ng-repeat div. So the three checkboxes dont share a controller. they have their own seperate.

here is the fixed code

<div data-ng-controller="MenuController" >
<form>
<div data-ng-repeat="filter in menu.filters" >
    <label>{{filter.title}}</label>
    <input type="checkbox" data-ng-click="setSelectedFilter()" />
</div>
</form>
</div>

http://jsfiddle.net/HAz3p/1/

Answer 2

There are multiple answers to this small problems of yours: But the best is: Define a factory and initialize "selectedFilters" into that factory and it will be initialized only once:

.factory('myfactory', function(){
var selectedFilters = {};
return selectedFilters;
});

.controller("MenuController", ['$scope','$log', function($scope, $log, myfactory) {
$scope.selectedFilters = myfactory;
...
...
}]);

as you declare "myfactory" and returning your empty object from that factory ie selectedFilters;

$scope.selectedFilters = myfactory;// myfactory contains the object returned from factory ans stored into the scope of the controller, now it would be initialized only once.