AngularJS - привязка каскада к текстовым полям

Я хочу выполнять каскадные операции в текстовых окнах с помощью Angular. Предположим, у меня есть 4 номера в существующих текстовых, я хочу:AngularJS - привязка каскада к текстовым полям

Sum Первые два числа в первом текстовом поле
Sum Следующие два числа во втором текстовом поле
Sum оба результата в третьем текстовом поле

Это HTML-пример того, что я хочу сделать. Я знаю, что это не работает, но я ищу наиболее элегантное решение моей проблемы.

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>AngularTest</title> 
 
</head> 
 
<body ng-app> 
 
    <form> 
 
     <fieldset> 
 
      <label for="first">Tag100</label> 
 
      <input type="number" id="first" min="0" ng-model="tag100" placeholder="0" /><br/> 
 
      <label for="second">Tag200</label> 
 
      <input type="number" id="second" min="0" ng-model="tag200" placeholder="0" /><br/> 
 
      <label for="third">Tag300</label> 
 
      <input type="number" id="third" min="0" ng-model="tag300" placeholder="0" /><br/> 
 
      <label for="fourth">Tag400</label> 
 
      <input type="number" id="fourth" min="0" ng-model="tag400" placeholder="0" /><br/> 
 
      <label for="onetwo">Tag 500 = Tag100 + Tag200</label> 
 
      <input type="number" id="onetwo" min="0" ng-model="tag500" placeholder="0" value="{{tag100+tag200}}"/><br/> 
 
      <label for="threefour">Tag 600 = Tag300 + Tag400</label> 
 
      <input type="number" id="threefour" min="0" ng-model="tag600" placeholder="0" value="{{tag300+tag400}}"/><br/> 
 
      <label for="fivesix">Tag 700 = Tag500 + Tag600</label> 
 
      <input type="number" id="fivesix" min="0" ng-model="tag700" placeholder="0" value="{{tag500+tag600}}" /><br/> 
 
     </fieldset> 
 
    </form> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</body> 
 
</html>

источник

2015-02-25 Marko Tošić

не будет работать при условии, нг-модель.

Вот решение:

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>AngularTest</title> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <form data-ng-controller="AppCtrl"> 
 
     <fieldset> 
 
      <label for="first">Tag100</label> 
 
      <input type="number" id="first" min="0" ng-model="tag100" placeholder="0" /><br/> 
 
      <label for="second">Tag200</label> 
 
      <input type="number" id="second" min="0" ng-model="tag200" placeholder="0" /><br/> 
 
      <label for="third">Tag300</label> 
 
      <input type="number" id="third" min="0" ng-model="tag300" placeholder="0" /><br/> 
 
      <label for="fourth">Tag400</label> 
 
      <input type="number" id="fourth" min="0" ng-model="tag400" placeholder="0" /><br/> 
 
      <label for="onetwo">Tag 500 = Tag100 + Tag200</label> 
 
      <input type="number" id="onetwo" min="0" ng-model="tag500" placeholder="0" /><br/> 
 
      <label for="threefour">Tag 600 = Tag300 + Tag400</label> 
 
      <input type="number" id="threefour" min="0" ng-model="tag600" placeholder="0" /><br/> 
 
      <label for="fivesix">Tag 700 = Tag500 + Tag600</label> 
 
      <input type="number" id="fivesix" min="0" ng-model="tag700" placeholder="0" /><br/> 
 
     </fieldset> 
 
    </form> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script> 
 

 
    angular.module('myApp', []) 
 
    .controller('AppCtrl', function ($scope) { 
 
     $scope.$watch(function() { 
 
      $scope.tag500 = ($scope.tag100 || 0) + ($scope.tag200 || 0); 
 
      $scope.tag600 = ($scope.tag300 || 0) + ($scope.tag400 || 0); 
 
      $scope.tag700 = ($scope.tag500 || 0) + ($scope.tag600 || 0); 
 
     }) 
 
    }); 
 

 
</script> 
 
</body> 
 
</html>

источник

2015-02-25 16:57:00

Благодарим Вас за рабочего раствора. Мне нужно иметь сотни/тысячи таких полей (действительно большая форма). Будет ли scope.watch влиять на производительность? –

Да .. Определенно. для каждой клавиши, эта функция будет запущена. Читайте о ng-model-options на странице https://docs.angularjs.org/api/ng/directive/ngModelOptions –

AngularJS - привязка каскада к текстовым полям

ответ

Смежные вопросы