How to push something into an array in a controller from another function?

Question

I'm trying to make a search input that searches for names in an address book using angularJS but I'm having trouble understanding a problem:

Here's my controller that should hold all the current names:

addressbook.controller('addressBookController', function ($scope) {

    $scope.names = [];
});

And here's my repeater that should show the names that matches the query from the search input:

<li data-ng-repeat="name in names | filter: query">{{name}}</li>

Here's the function that adds a contact to the Firebase database:

addContact: function() {

    var firstName = document.getElementById('fname').value;
    var lastName = document.getElementById('lname').value;

    dbContactsRef.push({firstName: firstName, lastName: lastName});
}

But I also want this to push the first and last name into the $scope.names array (for example "Tom Hanks") so my repeater can iterate through it. I'm sure this is very simple to do but I'm drawing blanks and my queries on google come up with no answer. Or if there is a better way of doing this let me know.

When you add an object to Firebase (through its push or set functions or one of the AngularFire equivalents), the data is automatically also available to local code. So if you have a dbContactsRef.on('child_added' it will automatically trigger when you call dbContactsRef.push. — Frank van Puffelen
– Frank van Puffelen, Commented Nov 5, 2014 at 19:01
@FrankvanPuffelen Wow.. I actually solved it just reading your hint, THANK YOU! — Chrillewoodz
– Chrillewoodz, Commented Nov 5, 2014 at 19:08

mitch · Accepted Answer · 2014-11-05 18:29:21Z

1

Here is where you do your ordering

<li data-ng-repeat="name in names | filter: query | orderBy: 'toString()'">{{name}}</li>

If your function is in an object outside the scope of the controller, you can do

    addContact: function() {

    var firstName = document.getElementById('fname').value;
    var lastName = document.getElementById('lname').value;

     dbContactsRef.push({firstName: firstName, lastName: lastName});
     var scope = angular.element(yourElementWitController).scope();
     ///OR -- angular.element(document.getElementById('address-book')).scope()
     scope.names.push(firstName+' '+lastName);
     scope.$apply();
   }

angular.element() allows you to access the angular scope applied to the element. Here is a working example using document.getElementById():

UPDATE 2

http://jsfiddle.net/ck9vdkan/3/

The orderBy filter was wrong. It takes a string. In this case, we are using a simple array of strings. So, we call the 'toString()' member of each string object to dothe orderBy.

UPDATE 3* Search added. 'query' is a string property and bound by ng-model of the search box (within the scope of the controller) in this case. The filter directive will filter items *starting with the" the query value.
Here it is: http://jsfiddle.net/ck9vdkan/4/

edited Nov 5, 2014 at 18:29

answered Nov 5, 2014 at 17:15

mitch

1,83115 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chrillewoodz Over a year ago

Doesn't seem to work, (yourElementWithController) represents the name of my module right? Which is addressbook.

mitch Over a year ago

I updated it a bit. The yourElementWithController is the Css selector you can use like in JQuery OR use document.getElementById().

mitch Over a year ago

@Chrillewoodz see update and jsfiddle. I am assuming the function you mentioned isn't integrated with the rest of your angular app.

Chrillewoodz Over a year ago

It works, isch.. But the search field only searches for names added in one session, if I reload the browser it can no longer search for the names for some reason. Any idea?

mitch Over a year ago

This can be fixed with persisting the data somewhere. For example, your contrller will need to read the added data from Firebase in the definition of your controller. @mayank suggested a service (docs.angularjs.org/guide/services) which would be appropriate. The service would be brought into your controller the same way the $scope is after you defined the service (this is assuming the service resides under the same module). Your servce would expose a function to return the Firebase data which will be assigned to your scope.names.

|

Collectives™ on Stack Overflow

How to push something into an array in a controller from another function?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related