如何用初始值預填計算表格？

我有一個很長的計算表單，並且想要預先填寫一些顯示初始結果的值。這些初始值應該存在於模板中，以便可以輕鬆編輯。看起來，角度的方法是使用讀取輸入值字段的指令並用這些值初始化應用程序。如何用初始值預填計算表格？

下面是設置從輸入字段的模型值的一種方法：

<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更好的辦法？

UPDATE

我剛剛發現了一個真正的骯髒的方式在控制器更新初始化後的輸入字段使用綁定的計算。它不僅感覺就像一個糟糕的主意，初始值也不住在模板：

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

相比較而言，在我的控制器初始對象填寫的字段，但不會觸發觀察家（重要對於計算結果）：

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

但是有更好的方法可以做到這一點，不是嗎？

來源

2013-09-25 rzschoch

難道你不能在控制器中初始化你的表單模型嗎？ – Beterraba

感謝您的時間和想法。不幸的是，這些值需要在模板中配置，並且計算只能通過監視方法觸發。 – rzschoch

不知道爲什麼你需要一個指令，除非我完全不瞭解這個問題。在範圍內旋轉模型，在控制器上設置值，然後使用ngmodel綁定它們。

在控制器：

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

在視圖中：

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

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

在角更高版本可以甚至具有計算運行AS使用NG-變化在模型變化的值。

來源

2013-09-25 19:23:03 Fourth

謝謝。我正在尋找一種解決方案，讓用戶直接在模板中定義默認值。因此，應在此字段中輸出「30」，並觸發執行計算的鏈接監視方法。該計算將結果填入表單中的其他字段。我怎樣才能做到這一點？上述鏈接解決方案是一個很好的起點，但我的手錶方法並未觸發，這是我的表單缺乏結果的原因。 – rzschoch

好的，這是我發現的。條件：

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-26 17:10:13 rzschoch

如何用初始值預填計算表格？

回答

相關問題