Sharing data between functions in angularjs

Question

I am trying to implement two functions in an an angular app but as soon as I implement the filter (start with letters from to), the code stops working. On their own, the (add/delete) functions work but as soon as I turn the data into a factory and try to access with the filter functions it fails.

Working functions:

$scope.items = items;

$scope.deleteItem = function (index) {
    items.data.splice(index, 1);
}
$scope.addItem = function (index) {
    items.data.push({
        Name: $scope.newItemName
    });
}

What causes the whole thing to break:

//filtering letters _ NOT WORKING
    function setLetters (from, to){
        this.fromLetter = from;
        this.toLetter = to;
      }
    //----



$scope.filter.startsWithLetter = function () {
    return function (items, fromLetter, toLetter) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var firstLetter = item.Name.substring(0, 1).toLowerCase();
            if ((!fromLetter || firstLetter >= fromLetter)
                && (!toLetter || firstLetter <= toLetter)) {
                filtered.push(item);
            }
        }
    return filtered;
   };
 });

//--filtering letters

Full code here: fiddle

score 0 · Accepted Answer · answered Sep 25 '15 at 21:56

0

There's a few issues in the fiddle. First I'm seeing an "Unexpected token )" error due to an extra ) on line 58.

Then when I fix that there is an issue on line 45 as you are trying to assign a value to $scope.filter.startsWithLetter, when $scope.filter is undefined. I think you want to assign the value to $scope.startsWithLetter.

There is still a problem with the filtering. When filtering with ng-repeat you can specify a filter or simply a predicate function. In each case the arguments passed to the function will be different - please read the docs. The function as-is is designed to be used in a filter created with angular.module('myApp', []).filter(). It doesn't work when you set it on the scope and pass it to filter: as a predicate function. If you prefer to filter using a function on the scope, rather than creating a reusable custom filter, you need to change it to accept the correct arguments - see fiddle.

Your page is trying to access setLetters in $scope.items.data but you are not setting $scope.items.data.setLetters. I don't think it makes sense to set it there inside items.data anyway. Perhaps set it directly on the scope? I also would set fromLetter and toLetter directly on the scope.

I also moved the setLetter buttons inside a <div ng-controller="ItemsController" >

Fiddle with those fixes

answered Sep 25 '15 at 21:56

sheilak

5,833
7
34
43

1

Hey Sheilak, many thanks for looking into this. Part of your answer is still unclear to me but the $scope.filter issue was definitely worth pointing out! Ideally what I want is to create a whole contacts factory service which I have begun to play with here http://jsfiddle.net/Tupira/5dn2mtb8/426/ but I am still having problems to get my controller accessing the factory service. But that is another thread. – HGB Sep 25 '15 at 22:43
Hi Sheilak, is there an issue with different versions of angularjs with your jsfiddle above? Whenver I add anything above angular 1.2 it throws an "https://docs.angularjs.org/error/ng/areq?p0=ItemsController&p1=not%20a%20function,%20got%20undefined" error. What is causing this? – HGB Sep 26 '15 at 09:20
I fixed this with this thread http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally by making sure to add myApp.controllerName to make it explicit. Jezz! Angularjs is not as intuitive as they make out. – HGB Sep 26 '15 at 09:51
It takes a while to get the hang of it :) glad you got sorted – sheilak Sep 26 '15 at 10:27
No worries sheilak, thanks for your help. Is there a way to make the push function actually update the array itself? If you could point me into the right direction for this it would be great as once the page is reloaded, the array is back to the old results. – HGB Sep 26 '15 at 10:36
The push function does update the array itself, it adds the new items to the end of the array. But when you reload the page, the state is lost and when the page loads it will initialise the hardcoded array you have defined. If you want to persist changes to the array between page loads, you would need to start saving the data somewhere e.g. in a database. – sheilak Sep 26 '15 at 10:45
That is what I thought! Thanks again Sheilak. – HGB Sep 26 '15 at 11:04

Sharing data between functions in angularjs

1 Answers1