javascript - 参数更改时 Angular 表达式中的函数不更新

Question

这是我正在尝试做的事情的简化示例。

(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>

基本上我想要一行输入和一个总计来显示总和。如果我使用 days=['Sun','Mon'...] 或过滤器，它就会起作用。但过滤器在语义上似乎不正确，并且不允许我向值对象添加其他属性(value={'Mon':2,'time':123456789} 会给出不正确的总和)并且days=[{name:'Sun'}...] 允许我存储比 days=['Sun','Mon'...] 更多的信息每一天。

Answer 1

您需要稍微编辑一下 add 函数，将 v=values[v] 更改为 v=values[v.name]在内部 map 函数内。

这是因为您的 days 数组现在包含对象({name: 'Mon'} 等)，所以...

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

下面是适当的编辑，它的工作原理我猜你希望它工作。哦，我在总和计算中添加了相同的 (v-0)||0 技巧，这样输入无效数据(例如文本)就不会破坏它。

(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>