app.js

angular .module('app',[]) .controller("PostsCtrl", function($scope, $rootScope, $http) { $http.get('price.json').success(function(data, status, headers, config) { $scope.posts = data; }) $scope.val = 1; $scope.kurs = 21; $scope.check = true; $scope.all = {}; } ); angular .module('app') .filter('total', function() { return function(price) { var newprice = {}; var result = 0; for (var key in price) { newprice = price[key].replace(',', ''); result += parseFloat(newprice.replace(',', '')); } result = String(result).replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 '); return result; }; });

index.html

  <div class="uk-margin-large-top" ng-controller="PostsCtrl"> <div class="uk-text-right">Быстрый поиск по слову или фразе <input type="text" placeholder="демонтаж" ng-model="query" /> </div> <table class="uk-table uk-table-hover uk-table-condensed"> <thead> <tr> <th class="uk-text-center">№</th> <th>Наименование работ</th> <th class="uk-text-center">Ед. изм.</th> <th>Цена</th> </tr> </thead> <tbody ng-repeat="price in posts | filter:query"> <tr> <th colspan="4"> <h2>{{ price.category }}</h2> </th> </tr> <tr ng-repeat="datafields in price.datafields | filter:query"> <td class="{{check}}"> <input ng-model="check" type="checkbox" /> {{$index + 1}}</td> <td class="{{check}}">{{ datafields.name }}</td> <td class="{{check}}"> <input ng-model="val" ng-disabled="!check" ng-pattern="/^\d+$/" class="{{check}} number-pole" value="1" type="number" /> {{ datafields.ed }}</td> <td class="{{ all[datafields.name] = (check) ? (datafields.cost * kurs * val | number: 0) : zero }} </td> </tr> </tbody> <tfoot> <tr> <th style="border: 0" colspan="2"></th> <th colspan="2"> <br /> Общая сумма: <h2>{{ all | total | number: 3 }}</h2></th> </tr> </tfoot> </table> </div>

Plunker link

    2 answers 2

    In the controller, add $scope.all = {};

    Prices to collect in an array like this

     {{ all.total[datafields.name] = (check) ? (datafields.cost * kurs * val | number:3) : 0 }}

    This method will collect prices for all types of work, regardless of filtering, because when filtering the checkbox remains on. Planker updated.

    • something does not work, that is, does not display the amount - sashatexb
    • It remains to drive the array forichem and calculate the value of the price. These prices lead to the appropriate type, before summing up. - fedornabilkin
    • Help me finish this code to understand how it all works, I'm just a newbie in javascript - sashatexb
    • the result falls into the $ scope.all array, where do you need to start to start working with it? For example, sort only numbers and sum them - sashatexb

    Decided as follows:

    HTML

      <div class="uk-margin-large-top" ng-controller="PostsCtrl"> <div class="uk-text-right">Быстрый поиск по слову или фразе <input type="text" placeholder="демонтаж" ng-model="query" /> </div> <table class="uk-table uk-table-hover uk-table-condensed"> <thead> <tr> <th class="uk-text-center">№</th> <th>Наименование работ</th> <th>Ед. изм.</th> <th>Цена</th> </tr> </thead> <tbody ng-repeat="price in posts | filter:query"> <tr> <th colspan="5"> <h2>{{ price.category }}</h2></th> </tr> <tr ng-repeat="datafields in price.datafields | filter:query" ng-init="init(i, $last);"> <td class="uk-text-right">{{$index + 1}}</td> <td>{{datafields.name}}</td> <td> <input ng-init="inputInit($parent.$index, $index, $parent.$last, datafields.cost*kurs)" ng-change="valChange($parent.$index, $index)" ng-model="val[$parent.$index][$index].cout" ng-pattern="/^\d+$/" class="uk-text-center number-pole" value="0" type="number"> <span class="ed">{{ datafields.ed }}</span> </td> <td class="uk-width-2-10"> <div class="costInt">{{ datafields.cost * val[$parent.$index][$index].cout * kurs | round | number : 0 }}<span class="rub"> руб</span></div> </td> </tr> </tbody> <tfoot> <tr> <th style="border: 0" colspan="2"></th> <th colspan="2"> <br>Общая сумма: <h2>{{ getSumm() | total }} руб. </h2> <button class="uk-button uk-button-danger" ng-click="reset();"><i class="uk-icon-eraser"></i> Сбросить</button> </th> </tr> </tfoot> </table> </div>

    Js

     (function() { angular .module('app', []) .controller("PostsCtrl", function($scope, $rootScope, $http) { $http.get('price.json').success(function(data, status, headers, config) { $scope.posts = data; }); $scope.val = {}; $scope.kurs = 21000; $scope.inputInit = function(parentI, i, last, cost) { var identy = 'Numb' + parentI + '_' + i; if (typeof $scope.val[parentI] !== "object") { $scope.val[parentI] = {}; } $scope.val[parentI][i] = { cost: parseFloat(cost.toFixed(3)), cout: 0 }; // Раскомментить если нужно очистить поля //localStorage.clear(identy); var local = JSON.parse(localStorage.getItem(identy)); if (local) { if (local.cost !== $scope.val[parentI][i].cost) { localStorage.setItem( identy, JSON.stringify($scope.val[parentI][i]) ); } $scope.val[parentI][i].cout = local.cout; } else { localStorage.setItem( identy, JSON.stringify($scope.val[parentI][i]) ); } if (last) { $scope.summ = $scope.getSumm(); } }; $scope.getSumm = function() { var summ = 0; for (var i in $scope.val) { if ($scope.val.hasOwnProperty(i)) { for (var j in $scope.val[i]) { if ($scope.val[i].hasOwnProperty(j)) { summ += $scope.val[i][j].cout * $scope.val[i][j].cost; } } } } return summ; }; $scope.valChange = function(parentI, i) { var identy = 'Numb' + parentI + '_' + i; var cost = $scope.val[parentI][i].cost; var value = $scope.val[parentI][i].cout; var newValue = { cost: cost, cout: value }; localStorage.setItem(identy, JSON.stringify(newValue)); $scope.summ = $scope.getSumm(); }; $scope.reset = function() { localStorage.clear(); var summ = 0; for (var i in $scope.val) { if ($scope.val.hasOwnProperty(i)) { for (var j in $scope.val[i]) { if ($scope.val[i].hasOwnProperty(j)) { $scope.val[i][j].cout = 0; summ = $scope.val[i][j].cout; } } } } return summ; }; }); angular .module('app') .filter('total', function() { return function(result) { result = String(result).replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 '); return result; }; }); angular .module('app') .filter('round', function() { return function(result) { result = Math.round(result / 100) * 100; return result; }; }); })();