Question

我有一个显示两个列表的简单HTML文档。 angularJS模型将数据保存在两个数组中，并正确更新（如console.log语句所示）。但是HTML页面仅显示空的list2。如何获得它以每次呈现最新版本的模型？

我尝试阅读有关继承，2向绑定和一些角度指令的信息。仍然无法弄清楚。

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login, logout
from django.contrib import messages
from django.contrib.auth.forms import UserChangeForm
from .forms import SignUpform

def register_user(request):
    if request.method == 'POST':
        form = SignUpform(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data['username']
            password = form.cleaned_data['password1']
            user = authenticate(request, username=username, password=password)
            login(request, user)
            messages.success(request, 'You are registered')
            # redirect to a succes page
            return redirect('home')

    else:
        form = UserChangeForm()

    context = {'form': form}
    return render(request, 'register.html', context)

<!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 ng-controller="AlreadyBoughtController as bought">
    <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>

AngularJS：视图不显示更新的模型

0 个答案: