Question

我有一个HTML文件，该文件使用带有2个控制器和服务的AngularJS文件显示2个列表。列表是在模型中正确更新的数组，如console.log输出所示。但是HTML不会显示更新的list2（存储在angularJS服务中的数据）。有人可以告诉我我要去哪里了吗？

尝试查看API，角度指令，Controller As语法和继承概念。

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

Answer 1

问题在于concat不会更改原始数组。它创建一个新的数组。当您执行list2 = list2.concat(list1.splice(itemIndex, 1));时，会将list2设置为新数组，但是bought.list仍设置为旧数组，因此它不会更改。

一种解决方案是

替换

list2 = list2.concat(list1.splice(itemIndex, 1));

使用

list2.push(list1.splice(itemIndex, 1)[0]);

HTML视图不显示更新的模型

1 个答案: