HTML视图不显示更新的模型 [英] HTML View doesn't display updated model
问题描述
我有一个HTML文件，该文件使用带有2个控制器和服务的AngularJS文件显示2个列表.列表是在模型中正确更新的数组，如console.log输出所示.但是HTML不会显示更新的list2(存储在angularJS服务中的数据).有人可以告诉我我要去哪里了吗?
I have an HTML file which displays 2 lists using AngularJS file with 2 controllers and a service. The lists are arrays which are being correctly updated in the model, as evidenced by the console.log output. But the HTML doesn't display the updated list2 (data stored in the angularJS service). Can someone tell where I am going wrong?
尝试查看API，角度指令，Controller As语法和继承概念.
Tried looking at the API, angular directives, Controller As syntax and inheritance concepts.
index.html
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ShoppingListCheckOff">
<head>
<title>Shopping List Check Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
<style>
.emptyMessage {
font-weight: bold;
color: red;
font-size: 1.2em;
}
li {
margin-bottom: 7px;
font-size: 1.2em;
}
li > button {
margin-left: 6px;
}
button > span {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Shopping List Check Off</h1>
<div class="row">
<!-- To Buy List -->
<div class="col-md-6" ng-controller="ToBuyController as toBuy">
<h2>To Buy:</h2>
<ul>
<li ng-repeat="item in toBuy.list">
Buy {{ item.name }} {{ item.quantity }}
<button ng-click="toBuy.bought($index)" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span> Bought
</button>
</li>
</ul>
<div ng-if="!toBuy.list.length" class="emptyMessage">Everything is bought!</div>
</div>
<!-- Already Bought List -->
<div class="col-md-6">
<h2>Already Bought:</h2>
<ul>
<li ng-repeat="item in bought.list">Bought {{ item.quantity }} {{ item.name }}</li>
</ul>
<div ng-if="!bought.list.length" class="emptyMessage">Nothing bought yet.</div>
</div>
</div>
</div>
</body>
</html>
App.js
(function() {
'use strict';
angular
.module('ShoppingListCheckOff', [])
.controller('ToBuyController', ToBuyController)
.controller('AlreadyBoughtController', AlreadyBoughtController)
.service('ShoppingListCheckOffService', ShoppingListCheckOffService);
ToBuyController.$inject = ['ShoppingListCheckOffService'];
function ToBuyController(ShoppingListCheckOffService) {
var toBuy = this;
toBuy.list = ShoppingListCheckOffService.getList(1);
toBuy.bought = function(itemIndex) {
ShoppingListCheckOffService.transfer(itemIndex);
};
}
AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
function AlreadyBoughtController(ShoppingListCheckOffService) {
var bought = this;
bought.list = ShoppingListCheckOffService.getList(2);
}
function ShoppingListCheckOffService() {
var service = this;
// List of shopping items
var list1 = [
{ name: 'Cookies', quantity: 10 },
{ name: 'Bananas', quantity: 100 },
{ name: 'Toys', quantity: 6 },
{ name: 'Dildos', quantity: 300 },
{ name: 'Yaakovs', quantity: 1 }
];
var list2 = [];
service.transfer = function(itemIndex) {
list2 = list2.concat(list1.splice(itemIndex, 1));
console.log('List 1', list1);
console.log('List 2', list2);
};
service.getList = function(num) {
if (num == 1) {
return list1;
}
if (num == 2) {
return list2;
}
};
}
})();
推荐答案
问题是concat不会更改原始数组.它创建一个新的数组.当您执行list2 = list2.concat(list1.splice(itemIndex, 1));时，您将list2设置为新数组，但bought.list仍设置为旧数组，因此它不会更改.
The issue is that concat does not change the original array. It creates a new array. When you do list2 = list2.concat(list1.splice(itemIndex, 1)); you are setting list2 to a new array but bought.list is still set to the old array so it doesn't change.
一种解决方案是
替换
list2 = list2.concat(list1.splice(itemIndex, 1));
使用
list2.push(list1.splice(itemIndex, 1)[0]);
这篇关于HTML视图不显示更新的模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
