Представление HTML не отображает обновленную модель

У меня есть файл HTML, который отображает 2 списка с использованием файла AngularJS с 2 контроллерами и службой. Списки — это массивы, которые корректно обновляются в модели, о чем свидетельствуют выходные данные console.info. Но HTML не отображает обновленный список2 (данные хранятся в службе 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.info('List 1', list1);
      console.info('List 2', list2);
    };

    service.getList = function(num) {
      if (num == 1) {
        return list1;
      }
      if (num == 2) {
        return list2;
      }
    };
  }
})();

html angularjs view model

28.07.2019 03:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что concat не изменяет исходный массив. Он создает новый массив. Когда вы делаете list2 = list2.concat(list1.splice(itemIndex, 1));, вы устанавливаете list2 новый массив, но bought.list по-прежнему устанавливается на старый массив, поэтому он не меняется.

Одним из решений было бы

replace

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

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

Привет @georgeawg, спасибо, что нашли время отредактировать мой ответ. Мне любопытно, какие мысли стоят за вашим редактированием. Зачем делать часть replace желтым фоном (а не делать то же самое с частью with)?

— 28.07.2019 04:10

Желтый фон указывает на ошибочный код. В то время как белый фон указывает на правильный код.

— 28.07.2019 04:12

@RockySims А, это имеет смысл! Ошибка новичка.

— 28.07.2019 05:12

28.07.2019 03:50