85676

Filter array in second controller

Question:

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?

Answer1:

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>

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

Demo: <a href="http://jsfiddle.net/4veqjzdu/" rel="nofollow">http://jsfiddle.net/4veqjzdu/</a>

Recommend

  • Angular sharing data between controllers using service
  • A question on capturing the button click event in ANOTHER mxml file
  • Python tkinter canvas transparent
  • Make clear button backspace by one in python tkinter calculator
  • jquery-problem using val() in IE6
  • Avoid jQuery UI resizable 'alsoResize' to move in opposite direction
  • ONLY Visible Div form elements will get submitted
  • $_POST for text in DIV elements
  • Angular page doesn't refresh after data is added or removed
  • Not able to display correct data in table -AngularJS
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • Remove changes from one element when event occurs on another element?
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Jquery UI tool tip close icon
  • Meteor helpers not available in Angular template
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • Spring security and special characters
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • HTML download movie download link
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Arrays break string types in Julia
  • How to format a variable of double type
  • bootstrap to use multiple ng-app
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Data Validation Drop Down Box Arrow Disappearing
  • retrieve vertices with no linked edge in arangodb
  • A cron job substitute?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Linking SubReports Without LinkChild/LinkMaster
  • Binding checkboxes to object values in AngularJs
  • Python/Django TangoWithDjango Models and Databases
  • How to load view controller without button in storyboard?