AngularJS $观看多个项目

Question

我要实现的目标：
观察 'Height'、'Chest'、'Waist'、'Hips' & 'Thigh' 作用域，在更改时更新 $storage 数组。

当前问题：
虽然下面的方法有效，但我不得不将每个部分重复 5 次，我觉得这可以精简和清理！

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

谢谢。

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

link 到文档：$watchGroup

AngularJS $观看多个项目

AngularJS $watch multiple items

javascript

angularjs

angularjs-watch