参数更改时，角度表达式中的函数不更新

Function in angular expression not updating when parameter has changed

本文关键字：函数 更新 表达式 参数      更新时间：2023-09-26

下面是我尝试做的事情的一个简化示例

(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'...]更多的关于每天的信息。

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

这是因为您的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>

相关文章：