Суммарный массив входов

0

У меня есть список данных, которые когда я делаю привязку, я должен вызвать функцию на событии ввода keypress (я сделал мой код угловатым с этой скрипкой):

HTML

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-keydown="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>

Угловая

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.TheTotal= 0;
    $scope.Total = function()
    {
        var returnValue = 0;
        $scope.TheTotal  = 0;       

        for(var i = 0; i < $scope.Data.length; i++)
        {
            returnValue = returnValue + parseInt($scope.Data[i].Value);                  
        }

        $scope.TheTotal =  returnValue;        
    };
}

Но мне нужно, когда изменяется значение ввода, затем суммируется, но он терпит неудачу, потому что всегда теряется последняя нажатая клавиша... Любая помощь?

Вот скрипач: Fiddler

  • 0
    Вы можете сделать его более чистым, используя фильтр, а не помещать его в контроллер
  • 0
    Ваш код работает как есть. jsfiddle.net/ygkhh5q5/9
Показать ещё 3 комментария
Теги:
angularjs-filter
data-binding

3 ответа

0
Лучший ответ

По этой теме здесь

следующее будет делать трюк: http://jsfiddle.net/ygkhh5q5/6/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" />

            </li>
        </ul>
      Total: {{sum(Data)}}
  </div>
</div>

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.sum = function(list) {
      var total=0;
      angular.forEach(list , function(item){
        total+= parseInt(item.Value);
      });
      return total;
     }
}
Поделиться
  • 0
    почему за это тоже голосуют?
  • 0
    Зачем переходить на использование sum(Data) вне ng-<event> если то, что он сейчас использует, сработает и приведет к тому, что sum() будет выполняться реже?
Показать ещё 4 комментария
2

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

наценка

<body ng-app="app">
  <div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value"/>
        </li>
        </ul>
      Total: {{Data | total: 'Value'}}
  </div>

</body>

Код

.filter('total', function(){
  return function(array, prop){
    var total = 0;
    angular.forEach(array, function(value){
      total = total + parseInt(value[prop]);
    })
    return total;
  }
})

Demo Plunkr

Поделиться
  • 0
    Приятно. очень элегантное решение.
  • 0
    @ Puzzle84 спасибо за оценку :)
0

Событие, которое вы используете для обновления общего, запускается до того, как значение ввода действительно изменилось. Вместо этого вы должны использовать событие keyup или событие изменения.

http://jsfiddle.net/ygkhh5q5/12/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-change="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню