AngularJS $watch 多个项目

Question

我想要达到的目标：
观看 'Height'、'Chest'、'Waist'、'Hips' 和 'Thigh' 范围，更改更新 $storage 数组。

当前问题：
尽管以下内容有效，但我必须将每个部分重复 5 次，并且觉得这可以精简和清理！

我不确定这是否是最好的方法和一些保证建议会很有帮助！

谢谢。

  defaultStats();
  function defaultStats() {
    if ($scope.$storage.userData.bodyType === undefined) {
      $scope.$storage.userData.bodyType = (
        {'height': 525,'chest': 32,'waist': 30,'hips': 34,'thighs': 20,'bodyType': bodyType}
      );
    }
    $scope.height = $scope.$storage.userData.bodyType.height;
    $scope.chest = $scope.$storage.userData.bodyType.chest;
    $scope.waist = $scope.$storage.userData.bodyType.waist;
    $scope.hips = $scope.$storage.userData.bodyType.hips;
    $scope.thighs = $scope.$storage.userData.bodyType.thighs;
  }
  var bodyType = 'triangle';
  $scope.$watch('height', function() {
    $scope.$storage.userData.bodyType = (
      {'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType}
    );
  });
  $scope.$watch('chest', function() {
    $scope.$storage.userData.bodyType = (
      {'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType}
    );
  });
  $scope.$watch('waist', function() {
    $scope.$storage.userData.bodyType = (
      {'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType}
    );
  });
  $scope.$watch('hips', function() {
    $scope.$storage.userData.bodyType = (
      {'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType}
    );
  });
  $scope.$watch('thighs', function() {
    $scope.$storage.userData.bodyType = (
      {'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType}
    );
  });

更新

  // Default Stats (Average UK Woman)
  defaultStats();
  function defaultStats() {
    if ($scope.$storage.userData.bodyType === undefined) {
      $scope.$storage.userData.bodyType = (
        {'height': 525,'chest': 32,'waist': 30,'hips': 34,'thighs': 20,'bodyType': bodyType}
      );
    }
    $scope.height = $scope.$storage.userData.bodyType.height;
    $scope.chest = $scope.$storage.userData.bodyType.chest;
    $scope.waist = $scope.$storage.userData.bodyType.waist;
    $scope.hips = $scope.$storage.userData.bodyType.hips;
    $scope.thighs = $scope.$storage.userData.bodyType.thighs;
  }
  var bodyType = 'triangle';
  $scope.$watchGroup(['height', 'chest', 'waist', 'hips', 'thighs'], function() {
     $scope.$storage.userData.bodyType = ({'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType});
  });
  // Reset Stats
  $scope.resetStats = function() {
    // Reset
    $scope.$storage.userData.bodyType = (
      {'height': 525,'chest': 32,'waist': 30,'hips': 34,'thighs': 20, 'bodyType': ''}
    );
    defaultStats();
  };

Answer 1

我建议使用$watchGroup

所以你的观察者应该看起来像

$scope.$watchGroup(['height', 'chest', 'waist', 'hips', 'thighs'], function() {
     $scope.$storage.userData.bodyType = ({'height': $scope.height,'chest': $scope.chest,'waist': $scope.waist,'hips': $scope.hips,'thighs': $scope.thighs,'bodyType': bodyType});
});

文档链接：$watchGroup