Question

我有一个很长的计算表格，想要预先填写一些值来显示初始结果。这些初始值应该存在于模板中，以便可以轻松编辑。似乎，角度方式是使用一个指令来读取输入值字段并使用这些值初始化应用程序。

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

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

CoffeeScript的：

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

在我的观察方法中阻止了初始计算。我现在可以为我的用例使用一个非常简单的指令：

模板中的输入字段：

<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-change将模型中的值更改为AS。

如何使用初始值预填充计算表单？

2 个答案: