为什么添加新项目时我的列表金额计数不会更新
Why wont my list amount count update when a new item is added?
所以我有一个来自来源的基础:https://codepen.io/Russbrown/pen/IgBuh?editors=1010,用于一个简单的待办事项列表,我将对其进行扩展。
但是,当我按下某个项目上的复选框时,需要完成的项目总数不会更新。
这是代码:
索引.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>
应用.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
之类的东西,但这也不想工作。
非常感谢:)帮助
这是一个基于你的代码的工作 plunker。
我使用变量项而不是 getItems,因此当我从控制器更改值并向复选框添加 ng 单击时,它会更新。
<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>
让我们知道这是否有帮助。
没有代码可以调用 clear,因此请添加到控制器:
$scope.$watch('list', $scope.clear, true);
在视野中
<p>Remaining Tasks: {{list.length || 0}}</p>
首先,新项目没有显示,因为您有它:
text: $scope.newItemText,
而不是:
itemText: $scope.newItemText,
计算未完成项目的片段:
(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>
我希望它有所帮助。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- 货币代码为欧元-金额的格式不应包含小数
- 在输入字段中将最小金额设置为
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 将实时更新传递到条纹结账金额
- 如何在Javascript中通过点击按钮更新里程计值
- 使用javascript函数动态更新PayPal货币和金额字段
- 如何使用jQuery只更新其父类的总金额
- 为什么添加新项目时我的列表金额计数不会更新