0

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

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

<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 从默认值

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

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

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

但是有更好的方法来做到这一点，不是吗？

4

2 回答 2

2

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

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”在初始化期间被推送到模型。

有什么我可以做得更好的吗？

于 2013-09-26T17:10:13.670 回答
0

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

在控制器中：

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

在视图中：

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

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

在更高版本的 Angular 中，您甚至可以使用 ng-change 让计算运行为模型中的值发生变化。

于 2013-09-25T19:23:03.010 回答