[英]binding input and non-input numeric contents for calculation of a series of values
我正在尋找幫助。 我是Angular的新手,但是我已經搜索過,但是找不到答案。 基本情況是我有5個輸入框。 隨着這些更改,表中的數據也會更改。 但是,我有一行數據取決於前一個單元格,因此,如果A = 1,B = A + 2,C = B +1,依此類推。我寧願不重復我必須得到的所有瘋狂數學我已經嘗試將ng-model
添加到html單元格中(當然,在首次初始化頁面后,這當然沒有任何影響。是否可以將單元格的內容綁定到先前單元格的內容,而無需輸入有點嗎?
這是我嘗試以代碼形式進行操作的示例:
<input type="text" ng-model="value1"><br>
<input type="text" ng-model="value2"><br>
<p ng-model="value3">{{value1 + value2}}</p>
<p>{{value 3 + value1}}</p>
這是一個非常簡化的版本,但要旨在那里。 (所以不像第2個<p>
是{{value3 + 2 * value1 + value2}}
)
您可能有一個在每個輸入上發生ng-change時調用的函數。 您應該避免在視圖中使用邏輯/算術。
然后,您可以在頁面或元素的控制器中使用此函數,然后像調用它一樣
<input type="text" ng-change="ctrl.myFunc(value1,value2)"/>
對於兩個輸入。
編輯:順便說一句,沒有p標簽的ng模型! 如果要將其用於其他后續值計算,則需要將其設置為只讀輸入。 http://docs.angularjs.org/api/ng/directive/ngModel
編輯2:或者,您也可以在輸入中使用value="{{value1 + ... }}"
,例如(根據您的示例):
<input type="text" ng-model="A" value="0"/>
<input type="text" ng-model="B" value="{{A + 2}}"/>
<input type="text" ng-model="C" value="{{B + 1}}"/>
編輯3:
這里是完整的解決方案:(也可以在plunkr中查看它的運行方式: http ://plnkr.co/edit/FXAae6mjOGOfw2Xczlb1)請記住,將$ scope中的所有內容用於大型應用程序都是不好的做法,而且<br/>
不應使用。 這是一個僅用於說明目的的示例:)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body ng-app="bindExample">
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.calculate = function() {
if (!$scope.noninput) $scope.noninput = [];
if (!$scope.value) $scope.value = [];
$scope.noninput[0] = parseInt($scope.value[0]) + parseInt($scope.value[1]) || 0;
$scope.value[2] = $scope.noninput[0]+100;
};
}]);
</script>
<div ng-controller="ExampleController">
1st Value plus: <input type="text" ng-model="value[0]" value="{{value[0]}}" ng-change="calculate()"/><br/>
2nd Value: <input type="text" ng-model="value[1]" value="{{value[1]}}" ng-change="calculate()"/><br/>
Non input result: <span ng-bind="noninput[0]">{{noninput[0]}}</span><br/>
Value 3nd (non-input result plus 100): <input type="text" ng-model="value[2]" value="{{value[2]}}"/><br/>
<br/>
Model:<br/>
(Input Values): {{value}}<br/>
(Non Input Values): {{noninput}}<br/>
</div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.