如何用初始值预填计算表格？

Question

我有一个长的计算表格，并希望预先填充一些值，以显示初始结果。这些初始值应该存在于模板中，以使这些值易于编辑。看起来，角度的方法是使用一个指令来读取输入值字段并使用这些值初始化应用程序。

下面是从输入字段设置模型值的一种方法：

<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>

咖啡脚本：

app = angular.module 'forms', []

app.directive 'ngInitial', ->
  restrict: 'A'
  controller: ['$scope', '$element', '$attrs', '$parse', ($scope, $element, $attrs, $parse) ->
    val = $attrs.sbInitial || $attrs.value
    getter = $parse($attrs.ngModel)
    setter = getter.assign
    setter($scope, val)
]

来源：Angular js init ng-model from default values

不幸的是，这在我的应用程序中行不通。将显示这些值，但不计算结果。我必须手动填写浏览器中的字段才能开始计算。

输入字段在我的控制器中被监视，如下所示：

$scope.$watch(
  'inputValues.permeatCapacity',

  function (newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }

    permeatCapacity = $scope.inputValues.permeatCapacity;
    permeatPerDay = permeatFactory.getPermeatPerDay(permeatCapacity);

    $scope.permeatPerDay = $filter('number')(permeatPerDay, 2);
  }
);

对于这个问题，最好的指导方针是什么，还是在Angular.js中有更好的方法？

更新

我刚刚在控制器中发现了一种非常脏的方法，在初始化后更新输入字段，使用绑定计算。这不仅是一个糟糕的想法，初始值也不存在于模板中：

$timeout(function () {
  $scope.inputValues.overallRecovery = 40;
  $scope.inputValues.permeatCapacity = 7.2;
}, 0);

相比之下，我的控制器中的这个初始对象填充字段，但不触发观察者(对于绑定计算很重要)：

$scope.inputValues = {
  overallRecovery: 40,
  permeatCapacity: 7.2
};

但还有更好的方法，不是吗？

Answer 1

好吧，这是我发现的。条件：

if (newValue === oldValue) {
  return;
}

在我的手表方法阻止了最初的计算。现在，我可以为我的usecase使用一个非常简单的指令：

模板中的输入字段：

<input type="text" id="overall-recovery" value="40" ng-model="inputValues.overallRecovery" initial-value>

该指令：

angular.module('ksbApp')
 .directive('initialValue', function ($compile) {
   return {
     restrict: 'A',
     require: 'ngModel',
     link: function (scope, element, attrs, ngModel) {
       var initialValue = attrs.value;

       ngModel.$setViewValue(initialValue);
     }
   };
 });

在这种情况下，值"40“在初始化时被推送到模型中。

还有什么我能做得更好的吗？

Answer 2

不知道为什么你需要一个指令，除非我不完全理解这个问题。在范围内旋转模型，设置控制器上的值，然后使用ngmodel绑定它们。

在主计长中：

scope.inputValues = {permeatCapacity: 1};
scope.calc = function(){
 return permeatFactory(scope.inputValues.perMeatCapacity);
};

认为：

<input ng-model="inputValues.permeatCapacity" type="text">

<button ng-click="calc()" />

在后来版本的角，你甚至可以运行的计算值，在模型中的变化，使用ng变化。