过滤器阵列中的第二个控制器 [英] Filter array in second controller

问题描述

我想通过点击，在控制器1 ID的按钮来过滤控制器2的数组。这是code我来了这么远，但我很困惑如何id参数传递给工厂，过滤列表，并更新控制器2的范围。

I'm trying to filter an array in Controller2 by clicking a button with an id in controller1. This is the code i've come up with so far, but I'm confused how to pass the id parameter to the factory, filter the list and update the scope in controller2.

<div id="parentpage">
    <div ng-controller="ctrl1" id="div1">
        <a href="#" ng-click="buttonclick(1)">Filter list with id 1</a>
        <a href="#" ng-click="buttonclick(2)">Filter list with id 2</a>
    </div>
    <script type="text/javascript">
        angular.bootstrap(document.getElementById('div1'), ['app']);
    </script>

    <div ng-controller="ctrl2" id="div2">
        <ul>
            <li ng-repeat="i in items">{{i.id}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        angular.bootstrap(document.getElementById('div2'), ['app']);
    </script>
</div>

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

app.factory('factory', function($http, $q){
    var factory = {};

    factory.getItems = function() { 
        var deferred = $q.defer();

        $http.get('someRestService').success(function (result){
            deferred.resolve(result);
        })

        return deferred.promise;
    }
});

app.controller('ctrl1', function($scope, factory){
    $scope.buttonclick = function(id) {
        //filter items in ctrl2 based on id
    }
});

app.controller('ctrl2', function($scope, factory){
    $scope.items = factory.getItems();
    $scope.items.then(function (items) {
        $scope.items = items;
    })
});

我怎样才能做到这一点？

How can I accomplish this?

推荐答案

您能够做出一个工厂然后可以修改在其中依次绑定到值在 $范围在 CTRL2 是这样的：

You are able to make a factory which can then amend the values in which are in turn bound to the $scope in ctrl2 like this:

<div ng-app="app" id="parentpage">
    <div ng-controller="ctrl1" id="div1"> <a href="#" ng-click="buttonclick(1)">Filter list with id 1</a>
 <a href="#" ng-click="buttonclick(2)">Filter list with id 2</a>
 <a href="#" ng-click="buttonclick()">Clear Filter</a>

    </div>
    <div ng-controller="ctrl2" id="div2">
        <ul>
            <li ng-repeat="i in items()">{{i.id}}</li>
        </ul>
    </div>
</div>

请注意了NG-重复是如何我的项目（​​），让您跟踪更新组项目在工厂。这将运行它返回 myItems 从出厂值 getItems 函数。

Note how the ng-repeat is i in items() which allows you to keep track of the updated set of items in the factory. This runs the getItems function which returns the value of myItems from the factory.

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

app.factory('testFactory', function () {
    var myOriginalItems = [{
        id: 1
    }, {
        id: 2
    }, {
        id: 3
    }, {
        id: 4
    }, {
        id: 5
    }];

    var myItems = myOriginalItems;

    return {
        setItems: function (id) {
            if (typeof id == 'undefined') {
                myItems = myOriginalItems;
            } else {
                myItems = [{
                    id: id
                }];
            }
            return myItems;
        },
        getItems: function () {
            return myItems;
        }
    };

});

app.controller('ctrl1', function ($scope, testFactory) {
    $scope.buttonclick = function (id) {
        testFactory.setItems(id);
    };
});

app.controller('ctrl2', function ($scope, testFactory) {
    $scope.items = testFactory.getItems;
});

演示： http://jsfiddle.net/4veqjzdu/

这篇关于过滤器阵列中的第二个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！