madcrazydrumma madcrazydrumma - 4 months ago 8
Javascript Question

Why wont my list amount count update when a new item is added?

So I've got a base from a source: https://codepen.io/Russbrown/pen/IgBuh?editors=1010 , for a simple to-do list which I will expand upon.

However, when I press the checkbox on an item, the total amount of items needing to be completed does not update.

Here is the code:

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;
});
};
});


N.B.: I tried using things like
ng-true-value
and
ng-false-value
on the checkboxes, but that didn't want to work either.

Help is greatly appreciated :)

Answer

Here is a working plunker based on your code.

I use a variable items instead of getItems so it updates when I change the value from the controller and added a ng-click to the checkbox.

<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>

And in the controller, I added a function check that increments or decrements if when check or uncheck the check box:

 $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 = '';
    };

Also,in the insert function I increment 'items' when we add a new item, so the total items left is accurate.

Let us know if that helps.

Comments