Новое в Angular - Вычисляемые переменные

Ответ 1

Для вычисленного поля добавьте метод к вашему контроллеру.,.

$scope.cost = function() { return $scope.val1 + $scope.val2 };

а затем привязать его напрямую. Он будет знать, когда он должен пересчитываться по мере изменения его составляющих значений.

<div>{{cost()}}</div>

Ответ 2

Хорошо,

Несколько часов спустя, и я думаю, что у меня есть мой ответ.

Использование $scope. $watch.

$scope.$watch('(height * width) * 40', function(v) {$scope.cost = v;});

или

$scope.$watch('height + width', function() {$scope.cost = (Number(height) * Number(width)) * 40;});

Это автоматическое обновление любых вычислений для наблюдаемых переменных. И это дает мне способ работать с ними без необходимости жить внутри фигурных скобок.

Кроме того, вычисленные значения можно повторно использовать и отслеживать для каскадных обновлений:

$scope.$watch('height * width', function(v) {$scope.dim = v;});
$scope.$watch('dim * 40', function(v) {$scope.cost = v;});

Поэтому, если высота и/или ширина изменяются, dim обновляется, а так как dim изменен, стоимость обновляется.

Ответ 3

Я изменил свой третий вход на:

<input type="text" value="{{val1 * 1 + val2}}" />

который вызывает Angular.js для обработки значений как чисел, а не строк.

Вот fiddle. Я почерпнул ответ из здесь.

Ответ 4

О проблеме 1:

Если возможно, следует использовать тип ввода = "номер". Это правильно позаботится о разборе чисел. Даже если у вас более старый браузер angular, он позаботится о форматировании их как чисел.

О проблеме 2:

Ваш ответ хороший Джейсон, если вам просто нужно показать простой текст на экране. Однако, если вы хотите привязать вход с моделью к произвольному выражению, вам нужно что-то еще.

Я написал директиву, которую вы можете использовать для привязки ng-модели к любому выражению, которое вы хотите. Всякий раз, когда выражение изменяется, модель устанавливается в новое значение.

module.directive('boundModel', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch(attrs.boundModel, function(newValue, oldValue) {
        if(newValue != oldValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        }
      });
    }
  };
})

Вы можете использовать его в своих шаблонах, например:

<input type="text" ng-model="total" bound-model="value1 + value2">

Или вот так:

<input type="text" ng-model="total" bound-model="cost()">

Где cost() - простая функция области, подобной этой:

$scope.cost = function() { return $scope.val1 + $scope.val2 };

Хорошо, что вы продолжаете использовать модель для ввода, и вам не нужно динамически обновлять свой атрибут value, что не работает в angular.

Ответ 5

Я новичок в AngularJS, но думаю, что можно использовать $parse:

http://docs.angularjs.org/api/ng/service/ $parse

Это интересно, если у вас есть выражение в виде строки. Вы можете использовать путь к свойствам и эту строку можно генерировать динамически. Это работает, если вы не знаете выражение во время компиляции, как eval(), но, вероятно, намного быстрее и, возможно, более безопасным (?).

Вот пример:

function Ctrl($scope,$parse) {
  var expression = 'model.val1 + model.val2';//could be dynamically created
  $scope.model = {
    val1: 0,
    val2: 0,
    total: function() { 
        return ($parse(expression))($scope); 
    }
  };
}

Ответ 6

u может связываться с функцией       

function CTRL ($scope) {
$scope.val1 = 3;
$scope.val2 = 4;
$scope.sum = function(){
   return ($scope.val1 *1 + $scope.val2 *1);
};

}

он будет работать одинаково выражение привязки будет работать, но в гораздо более сложных случаях нам нужны функции

Ответ 7

Функция $watch, которая доступна через переменную $scope, лучше всего подходит для этой работы, на мой взгляд.

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("myElement").innerHTML =
                      "" + newValue + "";
              }
             );

Функция $watch принимает: функция значения & Амп; функция слушателя

Приведенный выше пример взят из этой удивительной статьи: http://tutorials.jenkov.com/angularjs/watch-digest-apply.html

Прочитав это, я многому научился и смог реализовать решение, которое я искал.