Question

因此，对于我的网站，我正在尝试使用AngularJS设置一些自定义函数。

我的输出如下：

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

我的控制器看起来像这样：

.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;
  };
}])

我遇到的问题是每当我在$scope.selectedFilters的开头记录$scope.setSelectedFilter时，它总是一个空白数组。当我在函数结束时记录$scope.selectedFilters时，它包含我在那里推送的值，但它不会保留它。

如果我将$scope.selectedFilters定义为包含多个值，那么这些值将显示为一个空数组，就像每次我的函数运行时都会从原始声明中重新构建数组。

如何让$scope.selectedFilters数组保持我从$scope.setSelectedFilters函数推送给它的值？

这是一个显示问题的小提琴：http://jsfiddle.net/HAz3p/

Answer 1

您正在为每个ng-repeat div初始化新控制器。所以三个复选框不共享一个控制器。他们有自己独立的。

这是固定代码

<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

您的这些小问题有多个答案：但最好的是：定义工厂并将“selectedFilters”初始化为该工厂，它只会初始化一次：

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

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

当您声明“myfactory”并从该工厂返回您的空对象时，即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.

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

2 个答案: