Как в Angular пересчитывать данные на странице?

Question

[Сергей Николаев]

Пользователь вводит данные в инпуты.
В других инпутах нужно произвести над данными действия и вывести, как сделать, что бы при каждом изменении данных происходил пересчет и вывод? Как правильно вешать обработчик на форму?

Так не работает

<input value="{{Math.round(wh.price*wh.count/100)}}">

Answer 1

[Сергей Протько]

делать это в контроллере, а не во вьюшках, а во вьюшках только ng-model и никаких формул во вьюшках.

пример (этот же способ предлагал @kirill-93)

Профит - можно удобно и красиво покрыть это дело тестами, все предсказуемо, удобно писать да и производительность такого решения намного лучше. Ну и да, по мере усложнения формул, зависимостей элементов и т.д. это все намного удобнее разруливать.

Comments

[Сергей Николаев]

Отличный пример реализации, то что нужно, спасибо!

Answer 2

[Mikhail Osher]

DEMO.

angular.module('toster', [])

.controller('MainCtrl', function($scope) {
    $scope.data = {
        price: 0,
        count: 0
    };
    
    $scope.$watchCollection('data', function(data) {
        var computed = 0;
        
        var count = parseInt(data.count, 10);
        
        if (count) {
            computed = Math.round(data.price * count / 100);
        }
        
        $scope.computed = computed;
    });
});

Comments

[Сергей Протько]

Ватчи в контроллерах - плохо.

[Сергей Протько]

Темболее плохо $watchCollection, это лишь немного лучше дип ватча. А может и не лучше.

[Mikhail Osher]

Сергей Протько: будьте добры аргументировать.

[Mikhail Osher]

Сергей Протько: доклады на ngconf касательно производительности говорят обратное.

[Roman Zhak]

Mikhail Osher www.benlesh.com/2013/10/title.html

Answer 3

[Сергей Гаврилов]

<input ng-model="superModel">

scope.$watch("Math.round(wh.price*wh.count/100)", function(val){
    scope.superModel = val;
})