Sum массив входов

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

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>

ANGULAR

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

источник

2015-08-18 Freddy Castelblanco

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

Ваш код работает как есть. http://jsfiddle.net/ygkhh5q5/9/ –

, чтобы вы прокомментировали мое сообщение, что передача данных внутри суммы не требуется, но в вашей скрипке вы это делаете. также его код работает так, как есть? почему его общая функция изменилась на сумму? – Puzzle84

По This thread here

следующий будет делать трюк: 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; 
    } 
}

источник

2015-08-18 21:02:01 Puzzle84

почему это тоже забирается? –

Зачем использовать 'sum (Data)' вне 'ng- ', когда то, что он в настоящее время использует, работает и приведет к тому, что 'sum()' выполняется менее часто? –

интересно то же самое. но, о, хорошо, что помогает ОП. – Puzzle84

события используется для обновления Всего запускающий до значения ввода фактически изменилось. Вместо этого вы должны использовать событие 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>

источник

2015-08-18 21:12:18

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

Markup

<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

источник

2015-08-18 21:16:27

Ницца. очень элегантное решение. – Puzzle84

@ Puzzle84 благодарит за оценку :) –

Sum массив входов

ответ

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