Question

所以我从一个来源获得了一个基础：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;
        });
    };
});

N.B。：我尝试在复选框上使用ng-true-value和ng-false-value之类的内容，但是也不想这样做。

非常感谢帮助：）

Answer 1

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

此外，在插入功能中，当我们添加新项目时，我会增加“项目”，因此剩下的总项目是准确的。

对于清除已完成的项目，我通过ng-click添加了一个类clear（）的按钮：

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

如果有帮助，请告诉我们。

Answer 2

首先，新项目未显示，因为您有它：

text: $scope.newItemText,

代替：

itemText: $scope.newItemText,

代码段正在计算未完成的项目：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望它有所帮助。

Answer 3

没有代码可以调用clear，所以添加到控制器：

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

在视野中

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

添加新项目时，为什么我的列表数量不会更新？

3 个答案: