Question

我有两个应该同步的angularJS控制器。第一个是列表中的过滤器，第二个是列表。我和两个控制器都有一个服务用户，这使得一些异步类似于ajax的调用。

我的问题是列表初始化之前的过滤器过滤器，所以当页面第一次加载时我有未过滤的结果。怎么解决？

这是我的JSFiddle

以下是代码：

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller("infoCtrl", function ($scope, $timeout, person) {
    person.get().then(function (response) {
        // timeout to prevent '$digest already in progress' error
        $timeout(function () {
            $scope.people = response;
            $scope.$apply();
        })
    });
});

myApp.controller("filterCtrl", function ($scope, person) {
    $scope.$watch("maxAge", function (newValue) {
        if (newValue) {
            person.filterPeople(newValue);
        }
    });
});

myApp.service("person", function ($q, $timeout) {
    var _me = this;
    var AjaxGetPeople = function () {
        return $timeout(function () {
            var somedata = [{name: 'Marcel Sapin',age: 26}, 
                            {name: 'Anhel De Niro',age: 42}, 
                            {name: 'Johny Resset',age: 30}];
            _me.people = somedata;
            return somedata;
        });
    };
    var filterPeople = function (maxAge, collection) {
        if (!collection) collection = _me.people;
        if (!collection) return;
        angular.forEach(collection, function (p) {
            p.visible = (p.age <= maxAge);
        });
    };
    var get = function () {
        if (_me.people) { // return from 'cache'
            return $q.resolve(_me.people);
        }
        // if not 'cached', call 'ajax'
        return AjaxGetPeople().then(function (response) {
            // add visible property to people
            filterPeople(100, response);
            _me.people = response;
            return response;
        });
    };

    return {
        'get': get,
            'filterPeople': filterPeople
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="filterCtrl" ng-init="maxAge=30">People younger than
    <input ng-model="maxAge" type="number" /> years:
</div>
<hr/>
<div ng-controller="infoCtrl">
    <div ng-repeat="person in people" ng-show="person.visible">
        {{person.name}}, age {{person.age}}
    </div>
</div>
 </div>

＆＃13;

最初加载页面时不应显示

Anhel De Niro, age 42，因为我的过滤器的最大年龄为30 ...

Answer 1

好吧，尝试初始化如下：

var myApp = angular.module('myApp', []);

myApp.controller("infoCtrl", function ($scope, $timeout, person) {
    person.get(30).then(function (response) {
        // timeout to prevent '$digest already in progress' error
        $timeout(function () {
            $scope.people = response;
            $scope.$apply();
        })
    });
});

myApp.controller("filterCtrl", function ($scope, person) {
    $scope.$watch("maxAge", function (newValue) {
        if (newValue) {
            person.filterPeople(newValue);
        }
    });
});

myApp.service("person", function ($q, $timeout) {
    var _me = this;
    var AjaxGetPeople = function () {
        return $timeout(function () {
            var somedata = [{name: 'Marcel Sapin',age: 26}, 
                            {name: 'Anhel De Niro',age: 42}, 
                            {name: 'Johny Resset',age: 30}];
            _me.people = somedata;
            return somedata;
        });
    };
    var filterPeople = function (maxAge, collection) {
        if (!collection) collection = _me.people;
        if (!collection) return;
        angular.forEach(collection, function (p) {
            p.visible = (p.age <= maxAge);
        });
    };
    var get = function (init) {
        if (_me.people) { // return from 'cache'
            return $q.resolve(_me.people);
        }
        // if not 'cached', call 'ajax'
        return AjaxGetPeople().then(function (response) {
            // add visible property to people
            filterPeople(init, response);
            _me.people = response;
            return response;
        });
    };

    return {
        'get': get,
            'filterPeople': filterPeople
    };
});

它的工作在你的JSFiddle中，希望能帮到你; D

Answer 2

以下过滤器（ageFilter）将根据maxAge变量

进行过滤

<强> HTML

<div ng-app='myApp' ng-controller="Main" ng-init="maxAge=30">
    <input type="text" ng-model="maxAge">
    <li ng-repeat="user in users | ageFilter:maxAge">{{user.name}}</li>
   </div>

<强>脚本

var myApp = angular.module('myApp', []);

myApp.filter('ageFilter', function() {
  return function(input, Maxage) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].age <= Maxage)
              out.push(input[i]);
      }     
    return out;
  };
});

function Main($scope){

    $scope.users = [{name: 'Marcel Sapin',age: 26}, 
                            {name: 'Anhel De Niro',age: 42}, 
                            {name: 'Johny Resset',age: 30}]
}

同步与服务链接的两个AngularJS控制器

2 个答案: