Function in angular expression not updating when parameter has changed

Question

Here is a simplified example of what I'm trying to do.

(function(){
  var app=angular.module('Tester',[]);
  
  app.controller('TestController',function($scope){
    $scope.days=[{name:'Sun'},{name:'Mon'},{name:'Teu'},{name:'Wed'},{name:'Thu'},{name:'Fri'},{name:'Sat'}];
    //if I is use `days=['Sun','Mon'...]` it works
    $scope.values={};
    $scope.add=function(values){
      var sum=0;
      $scope.days.map(function(v){
        v=values[v];
        if(v){
          sum+=(v-0);
        }
      });
      return sum;
    }
  });
  
  app.filter('sum',function(){
    return function(obj){
      var total=0;
      for(var v in obj){
        total+=(obj[v]-0)||0;
      }
      return total;
    }
  });
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="Tester">
  <div ng-controller="TestController as test">
    <input ng-model="values[day.name]" value="{{values[day.name]||0}}" ng-repeat="day in days">
    <div>{{add(values)}}</div>
    <div>{{values | sum}}</div>
  </div>
</div>

Basically I want to have a row of inputs and a total to show the sum. It works if I use days=['Sun','Mon'...] or a filter. But the filter seems semantically incorrect as well as not allowing me to add other properties to the values object (value={'Mon':2,'time':123456789} would give an incorrect sum) and days=[{name:'Sun'}...] allows me to store more information than days=['Sun','Mon'...] about each day.

why not to use the same implementation of the filter in add as well? — eladcon
– eladcon, Commented Apr 8, 2015 at 13:11
Because I need to store more information in the values object, which means the filter method will give incorrect results. eg value={'Mon':2,'time':123456789} — qw3n
– qw3n, Commented Apr 8, 2015 at 13:22

jmustonen · Accepted Answer · 2015-04-08 13:31:07Z

You need to edit your add function a bit, changing v=values[v] to v=values[v.name] inside the inner map function.

This is because your days array now contains objects ({name: 'Mon'} etc), so...

$scope.days.map(function (v) {
  // in here v = {name: 'Mon'}, not 'Mon' as previously, 
  // but the values object still has day names as keys:
  // {'Sun': 2, 'Mon': 1} etc.
  // --> values[v] === undefined, but values[v.name] matches
})

Below is the edit in place, and it works as I presume you wanted it to work. Oh, and I added the same (v-0)||0 trick to the sum calculations, so that entering invalid data (text for example) doesn't break it up.

(function(){
  var app=angular.module('Tester',[]);
  
  app.controller('TestController',function($scope){
    $scope.days=[{name:'Sun'},{name:'Mon'},{name:'Teu'},{name:'Wed'},{name:'Thu'},{name:'Fri'},{name:'Sat'}];
    //if I is use `days=['Sun','Mon'...]` it works
    $scope.values={};
    $scope.add=function(values){
      var sum=0;
      $scope.days.map(function(v){
        v=values[v.name];
        if(v){
          sum+=(v-0)||0;
        }
      });
      return sum;
    }
  });
  
  app.filter('sum',function(){
    return function(obj){
      var total=0;
      for(var v in obj){
        total+=(obj[v]-0)||0;
      }
      return total;
    }
  });
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="Tester">
  <div ng-controller="TestController as test">
    <input ng-model="values[day.name]" value="{{values[day.name]||0}}" ng-repeat="day in days">
    <div>{{add(values)}}</div>
    <div>{{values | sum}}</div>
  </div>
</div>

Thanks, I'm just learning angular and thought i had messed up using it instead a simple bug like that.

Collectives™ on Stack Overflow

Function in angular expression not updating when parameter has changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related