Зачем менять количество подсчета количества списков при добавлении нового элемента?

Итак, у меня есть база из источника: https://codepen.io/Russbrown/pen/IgBuh?editors=1010, для простого списка дел, который я буду расширять.Зачем менять количество подсчета количества списков при добавлении нового элемента?

Однако, когда я нажимаю флажок на элементе, общая сумма элементов, подлежащих заполнению, не обновляется.

Вот код:

index.php:

<!DOCTYPE html> 
<html lang="en" ng-app="ToDo"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <meta name="description" content=""> 
     <meta name="author" content="Ryan Shah"> 

     <link rel="icon" href="img/favicon.ico"> 

     <title>Todo List - Untitled</title> 

     <script src="app/angular.js"></script> 

     <link href="css/style.css" rel="stylesheet"> 
    </head> 

    <body> 
     <div class="container" ng-controller="listCtrl"> 
      <p>Remaining Tasks: {{getItems()}}</p> 
      <ul> 
       <li ng-repeat="item in list"> 
        <input type="checkbox" ng-model="item.completed" /> 
        <span class="completed-{{item.completed}}">{{item.itemText}}</span> 
       </li> 
      </ul> 

      <form> 
       <input class="add-input" placeholder="I need to..." type="text" ng-model="newItemText" ng-model-instant /> 
       <button class="add-btn" ng-click="insert()"><h2>Add</h2></button> 
      </form> 
     </div> 

     <script type="text/javascript" src="app/app.js"></script> 
    </body> 
</html>

app.js:

var app = angular.module('ToDo', []); 
app.controller('listCtrl', function listCtrl($scope) { 
    $scope.list = [ 
     { 
      itemText: 'Hello World', 
      completed: false 
     }, 
     { 
      itemText: 'Hello :)', 
      completed: false 
     } 
    ]; 

    $scope.getItems = function() { 
     return $scope.list.length; 
    }; 

    $scope.insert = function() { 
     $scope.list.push({ 
      text: $scope.newItemText, 
      completed: false 
     }); 
     $scope.newItemText = ''; 
    }; 

    $scope.clear = function() { 
     $scope.list = _.filter($scope.list, function(item) { 
      return !item.completed; 
     }); 
    }; 
});

нотабене: Я постарался использовать такие вещи, как ng-true-value и ng-false-value, но это тоже не хотело работать.

Помощь очень ценится :)

источник

2016-07-16 madcrazydrumma

Какое * точное * значение не обновляется и вы хотите его обновить? – oryol

Сначала вы вызываете 'getItems();', но это должно быть '$ scope.getItems();'. – developer033

@ разработчик033 удален это линия. – madcrazydrumma

Вот working plunker based on your code.

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

<p>Remaining Tasks: {{items}}</p> 
<ul> 
    <li ng-repeat="item in list"> 
    <input type="checkbox" ng-model="item.completed" ng-click='check(item)'/> 
    <span class="completed-{{item.completed}}">{{item.itemText}}</span> 
    </li> 
</ul>

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

$scope.items = $scope.list.length; 

    $scope.check = function(item) { 
     console.log('check ' + item.completed); 
     if (item.completed) { 
     $scope.items--; 
     } else { 
     $scope.items++; 
     } 
    } 
    $scope.getItems = function() { 
     return $scope.list.length; 
    }; 

    $scope.insert = function() { 
     $scope.list.push({ 
      text: $scope.newItemText, 
      completed: false 
     }); 
     $scope.items++; 
     $scope.newItemText = ''; 
    };

Кроме того, в функции вставки I увеличивает «элементы», когда мы добавьте новый элемент, так что итоговые элементы остаются точными.

Для ясно законченных элементов, я добавил кнопку, класс ясно() через нг-CLICK:

$scope.clear = function() { 
    console.log('clear'); 
    for (var i = 0; i < $scope.list.length; i++) { 
     $scope.list[i].completed = false; 
    } 
    $scope.items = $scope.list.length; 
    };

И в HTML:

<button class="add-btn" ng-click="clear()"> 
    <h2>Clear Completed</h2> 
</button>

Сообщите нам об этом, если это помогает.

источник

2016-07-16 03:25:29 Gregori

Это прекрасно работает! Я не думал о директиве ng-click – madcrazydrumma

любой идеи, как я могу исправить очистку элемента для работы? Он не очищает элементы, которые, как мы надеемся, описаны в коде – madcrazydrumma

. Я обновил plunkr, добавив кнопку очистки, которая вызывает clear() с помощью ng-click и переписала вашу функцию clear(), чтобы установить все логические значения в false и сбросить общие предметы. Я также обновил ответ. – Gregori

Во-первых, новые элементы не показываются, потому что вы это:

text: $scope.newItemText,

вместо:

itemText: $scope.newItemText,

A фрагмент рабочий подсчет незавершенных пунктов:

(function() { "use strict"; angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.list = [{ itemText: 'Hello World', completed: false }, { itemText: 'Hello :)', completed: false }]; $scope.insert = function() { $scope.list.push({ itemText: $scope.newItemText, completed: false }); $scope.newItemText = ''; // Supposing that all items will be added as uncompleted $scope.listTotal++; }; // Initialization of listTotal... $scope.listTotal = $scope.list.filter(function(item) { return !item.completed; }).length; $scope.get_total = function(item) { // Easy way to increment/decrement the total $scope.listTotal += item.completed ? -1 : 1; }; }); })();

<html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <div class="container"> <p ng-bind="'Remaining Tasks: ' + listTotal"></p> <ul> <li ng-repeat="item in list track by $index"> <input type="checkbox" ng-model="item.completed" ng-change="get_total(item)" /> <span class="completed-{{item.completed}}" ng-bind="item.itemText"></span> </li> </ul> <form> <input class="add-input" placeholder="I need to..." type="text" ng-model="newItemText" ng-model-instant /> <button class="add-btn" ng-click="insert()"> <h2>Add</h2></button> </form> </div> </body> </html>

Я надеюсь, что это помогает.

источник

2016-07-16 03:21:26 developer033

Спасибо за эту проблему, но это не помогло решить проблему! :) – madcrazydrumma

@madcrazydrumma, мой плохой, я неправильно понял ваш вопрос. Я знаю, что вы уже приняли ответ, но в любом случае взгляните на мой ответ. – developer033

Там нет коды для вызова ясно, так что добавить к контроллеру:

$scope.$watch('list', $scope.clear, true);

И ввиду

<p>Remaining Tasks: {{list.length || 0}}</p>

источник

2016-07-16 03:22:48

Зачем менять количество подсчета количества списков при добавлении нового элемента?

ответ

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