Angularjs $scope is confusing me

Question

I really need some help here... I´m trying for hours now and can´t get it to work...

I have a .json file with 100 products like this:

[{
    "ean": "3613132010420",
    "brand": "NewBrand",
    "desc": "A description",
    "feature1": "",
    "feature2": "",
    "feature3": "",
    "feature4": "",
    "feature5": "",
    "img": "",
    "metric": {
      "gender": "female",
    },
    "score":""
  },
  {
    "ean": "3613132010420",
    "brand": "NewBrand",
    "desc": "A description",
    "feature1": "",
    "feature2": "",
    "feature3": "",
    "feature4": "",
    "feature5": "",
    "img": "",
    "metric": {
      "gender": "female",
    },
    "score":""
  }]

I read the json with $http and put everything in $scope.products. The data is shown in a list, everything is fine. Now I want to filter the products and alter the score variable (after swipe on a option slider).

The view should then also be updated due to the angular data-binding.

How can I change this variable in the $scope? This is what I tried and nothing works:

$('.find-style-slider .slick-list').bind('touchstart click', function(){
    angular.forEach($scope.products, function(value, key) {

    $scope.products[key].score = '25'; //nothing happens

    var obj = { score: '25' }; 
    $scope.products[key].push(obj); //Uncaught TypeError: undefined is not a function
    $scope.products.splice(key, 0, obj); //no error but $scope variable does not change
    $scope.products[key].unshift(obj); //Uncaught TypeError: undefined is not a function
    });
});

Do I need to update something or $apply()? I would be thankful for any help/hint...

Edit: I think the $scope is not working like I thought.... I fill the $scope.products with a service:

productService.initDb().then(function(products) {
    $scope.products = products;
});

When I put this

        var obj = { score: '25' };
        $scope.products.splice(0, 0, obj);

INSIDE the initDb function then the first elements gets updated! But not outside.

The question is now: WHY? And how can I access the $scope.products from outside the service function?

I thought the $scope is the same for the whole controller... confused

It's an async function - you have to run your code to modify `products` AFTER` it has been received from the backend. — tymeJV, Mar 18 '15 at 15:47
Why are you not using the `value`? That's the actual object. — ryanyuyu, Mar 18 '15 at 15:51
I call the forEach function manually via a swipe gesture on a slider. And at this point all products are already loaded... — Nico, Mar 18 '15 at 15:51
instead of $scope.products[key].score = '25'; better use value.score = '25' — Rabi, Mar 18 '15 at 15:52
are you calling the `angular.forEach` with something like ngClick or just after the `productService.initDb()` callback? — nada, Mar 18 '15 at 16:02
With your edit: you are calling $scope outsite angular's world. No way that it can work like that. jQuery knows about $scope? AngularJs know what $scope are you trying to modify? How to get a scope outside angular's world http://stackoverflow.com/questions/15424910/angularjs-access-scope-from-outside-js-function . But i recomment to you use some directive and bind click that or use ngClick instead. — nada, Mar 18 '15 at 16:09
@nada you are right... but then I wonder that I could read the $scope. I changed it to angular.element($('.find-style-slider .slick-list')).bind("touchstart click", function (e) {}); but I still have problems altering the score value. value.score='25' is not updating $scope.producs[n].score and $scope.products[0].scope='value' is also now working... — Nico, Mar 18 '15 at 16:55

score 0 · Accepted Answer · answered Mar 18 '15 at 15:54

0

$scope.products[key] is an object not an array. push, splice, unshift method are defined on arrays not on objects.

Try the below logic.

angular.forEach($scope.products, function(product) {
   product.score = '25';
})

Try $scope.$apply() if required.

answered Mar 18 '15 at 15:54

Vinay K

5,562
1
18
27

If this solution doesn't solve your problem, please create a plnkr/fiddle. – Vinay K Mar 18 '15 at 15:55
Hi! I still have problems to update the score value... here is a fiddle: http://jsfiddle.net/nicondev/d0k48v6z/3/ – Nico Mar 20 '15 at 04:23
@Nico, getProducts method is returning a promise not the data. updated fiddle: http://jsfiddle.net/d0k48v6z/4/ – Vinay K Mar 20 '15 at 04:30
Thanks for your answer! Your code is working great but in my App I also have a angular touchstart/click event. And I would like to change the values on click. So when the controller gehts loaded, I load the data once and then filter it on click. But... that doesn't work :( See my fiddle here: http://jsfiddle.net/nicondev/cmxqr9aL/ – Nico Mar 20 '15 at 08:52
1. We will not get $scope in the event listener. Use the $scope from the controller. 2. Trigger $scope.$apply in event handler. Updated fiddle: http://jsfiddle.net/cmxqr9aL/2/ – Vinay K Mar 20 '15 at 09:35
In the example it`s working but in my code the score still is 0 :-/ product.score = '25'; does not seem to work. When I console.log(JSON.stringify(product )); directly after the product.score = '25' I can see that the score is still 0... and I added $scope.$apply... this is really stange... – Nico Mar 20 '15 at 09:50
I think it`s because of the asynchron service call (I call a sqllite query). Please see my plunker with a 1second timeout here: http://jsfiddle.net/nicondev/6xe8bed1/ – Nico Mar 20 '15 at 11:15

Angularjs $scope is confusing me

1 Answers1