Question

所以我有一个菜单和一个订单标签。点击＆＃34;添加＆＃34;菜单项上的按钮应该将此项目添加到订单中。必须更新订单选项卡，并且它应该在Angular中自动更新，就我在Web中看到的那样。但它并不适用于我的情况。这是我的HTML：

<div class="order-bar" ng-controller="menuCtrl">
  <div class="order-bar-toggle"></div>
  <h2>Your order:</h2>
   <ul>
    <li ng-repeat="item in order">
      <p>{{item.name}}, {{item.price}}.</p>
    </li>
  </ul>
</div>

<div class="page-header">
  <h1>Menu:</h1>
</div>

<div ng-controller="menuCtrl">

  <ul>
    <li ng-repeat="meal in menu">
      {{meal.name}}, {{meal.price}}. Description: {{meal.description}}. <button ng-click="addToOrder(meal)">Add</button>
    </li>
  </ul>

</div>

和js文件：

var menuApp = angular.module("menuApp", []);

menuApp.controller("menuCtrl", function($scope){
  $scope.menu = [
    {name: "Coca-Cola", category: "Soft Drink", description: "Carbonated Soda Drink", price: "6 zl", vegetarian: true, image: "Coca-Cola.jpg"},
    {name: "Nestea", category: "Soft Drink", description: "Iced Tea Drink", price: "6 zl", vegetarian: true, image: "nestea.jpg"},
    {name: "Frankfurt Sausages", category: "Main Dish", description: "With ketchup, mustard and french fries", price: "27 zl", vegetarian: false, image: "Sausages.jpg"},
    {name: "Ice Cream", category: "Dessert", description: "Vanilla, Chocolate, Strawberry, Stracciatella", price: "13 zl", vegetarian: false, image: "icecream.jpg"},
    {name: "Brownie", category: "Dessert", description: "Chocolate Cake", price: "15 zl", vegetarian: false, image: "Brownie.jpg"}
  ];

  $scope.order = [{name: "product", price:"1000 zl"}];

  $scope.addToOrder = function(meal) {
    $scope.order.push(meal);
    console.log($scope.order);
  }

});

当我在console.log中更新订单时，它会在其中显示新元素，但它们不会在页面上打印出来。为什么呢？

Answer 1

问题是您的页面上有2个控制器实例。您正在将项目添加到一个控制器范围的订单，但是从另一个控制器范围显示它们。

如果要重复该阵列，还需要在重复中添加一个轨道，以防止重复出现错误。

Here就是一个例子。

<div ng-app="menuApp">

<div class="order-bar" ng-controller="menuCtrl">
  <div class="order-bar-toggle"></div>
  <h2>Your order:</h2>
   <ul>
    <li ng-repeat="item in order track by $index">
      <p>{{item.name}}, {{item.price}}.</p>
    </li>
  </ul>

<div class="page-header">
  <h1>Menu:</h1>
</div>


  <ul>
    <li ng-repeat="meal in menu">
      {{meal.name}}, {{meal.price}}. Description: {{meal.description}}. <button ng-click="addToOrder(meal)">Add</button>
    </li>
  </ul>
</div>


</div>

Answer 2

你在html中缺少 </div> ，也不需要两个menuCtrl，在下面有一个完整的更改。

再次设置控制器时，它将重新初始化。

＆＃13;

var menuApp = angular.module("menuApp", []);

menuApp.controller("menuCtrl", function($scope){
  $scope.menu = [
    {name: "Coca-Cola", category: "Soft Drink", description: "Carbonated Soda Drink", price: "6 zl", vegetarian: true, image: "Coca-Cola.jpg"},
    {name: "Nestea", category: "Soft Drink", description: "Iced Tea Drink", price: "6 zl", vegetarian: true, image: "nestea.jpg"},
    {name: "Frankfurt Sausages", category: "Main Dish", description: "With ketchup, mustard and french fries", price: "27 zl", vegetarian: false, image: "Sausages.jpg"},
    {name: "Ice Cream", category: "Dessert", description: "Vanilla, Chocolate, Strawberry, Stracciatella", price: "13 zl", vegetarian: false, image: "icecream.jpg"},
    {name: "Brownie", category: "Dessert", description: "Chocolate Cake", price: "15 zl", vegetarian: false, image: "Brownie.jpg"}
  ];

  $scope.order = [{name: "product", price:"1000 zl"}];

  $scope.addToOrder = function(meal) {
    $scope.order.push(meal);
    console.log($scope.order);
  }

});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
 
</head>
<body ng-app='menuApp'>
  <div class="order-bar" ng-controller="menuCtrl">
   <h2>Your order:</h2>
  <ul>
    <li ng-repeat="item in order">
      <p>{{item.name}}, {{item.price}}.</p>
    </li>
 </ul>
  <div class="page-header">
    <h1>Menu:</h1>
  </div>
  <ul>
    <li ng-repeat="meal in menu">
      {{meal.name}}, {{meal.price}}. Description: {{meal.description}}.
      <button ng-click="addToOrder(meal)">Add</button>
    </li>
  </ul>
</div>
</body>
</html>

＆＃13;

添加项目后，为什么我的数组不能重新渲染ng-repeat？

2 个答案: