我正在尝试学习 Angular - 为什么我的对象没有使用 ng-repeat 出现？

Question

我希望能够在单击事件时将对象推送到数组中。我能够做到这一点。但是现在我的对象没有出现在 ng-reapat 中以进行订购。我在这里错过了什么？

angular.module('app', []);

angular.module('app').controller("MainController", function() {
  var vm = this;
  vm.ordered = [];

  vm.menu = [{
    title: 'Pizza',
    type: 'entree',
    favorite: true,
    price: 10
  }, {
    title: 'Tacos',
    type: 'entree',
    favorite: false,
    price: 5
  }, {
    title: 'Onion Rings',
    type: 'app',
    favorite: false,
    price: 2
  }, {
    title: 'Ice Cream',
    type: 'dessert',
    favorite: false,
    price: 11
  }, {
    title: 'Mac n Cheese',
    type: 'app',
    favorite: false,
    price: 7
  }, {
    title: 'Salad',
    type: 'salad',
    favorite: true,
    price: 4
  }];
}).directive('section', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.ordered = [];
      element.bind('click', function(event) {
        scope.ordered.push(scope.item)
      });

    }
  };
});;

.left {
  float: left;
  width: 50%;
}
.right {
  float: left;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="app" ng-controller="MainController as main">

  <div class="left">
    <h2>Lists One</h2>
    <section id="{{item.id}}" ng-repeat="item in main.menu | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">

      <strong>{{item.title}} </strong>
      <span>$ {{item.price}}</span>

    </section>
  </div>

  <div class="right">
    <h2>Lists Two</h2>
    <section id="{{item.id}}" ng-repeat="item in main.ordered | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">

      <strong>{{item.title}} </strong>
      <span>$ {{item.price}}</span>

    </section>
  </div>

Answer 1

我不确定这与您的错误有什么关系，但您应该避免使用可能与 HTML 标记名称冲突的指令名称。

您的 section 指令名称与 HTML5 标签冲突。

Answer 2

如上一个问题所述，您应该使用 ng-click 而不是指令。

要简单地将一个项目添加到有序列表中，您可以这样做 ng-click="main.ordered.push(item)" 但是当用户多次单击一个项目时，您会遇到有序列表中重复项目的问题。

相反，您可以向您的控制器添加一个函数，它会执行诸如检查它是否在有序列表中，如果它在数量上加 1，增加总价等事情。像 ng-click="main.addToOrder(item)"

angular.module('app', []);

angular.module('app').controller("MainController", function() {
  var vm = this;
  vm.ordered = [];

  vm.menu = [{
    title: 'Pizza',
    type: 'entree',
    favorite: true,
    price: 10
  }, {
    title: 'Tacos',
    type: 'entree',
    favorite: false,
    price: 5
  }, {
    title: 'Onion Rings',
    type: 'app',
    favorite: false,
    price: 2
  }, {
    title: 'Ice Cream',
    type: 'dessert',
    favorite: false,
    price: 11
  }, {
    title: 'Mac n Cheese',
    type: 'app',
    favorite: false,
    price: 7
  }, {
    title: 'Salad',
    type: 'salad',
    favorite: true,
    price: 4
  }];
  
  vm.addToOrder = function(item) {
    if (vm.ordered.indexOf(item) > -1) { // if you modify the properties of ordered items (e.g. adding a quantity) you'll need to change this
      // increase quantity
      // increase total (if you have one)
      // etc.  
    } else {
      vm.ordered.push(item);  
    }
  };
});

.left {
  float: left;
  width: 50%;
}
.right {
  float: left;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="app" ng-controller="MainController as main">

  <div class="left">
    <h2>Lists One</h2>
    <section id="{{item.id}}" ng-repeat="item in main.menu | filter:main.searchInput | orderBy:main.order.key:main.order.reverse" ng-click="main.addToOrder(item)">

      <strong>{{item.title}} </strong>
      <span>$ {{item.price}}</span>

    </section>
  </div>

  <div class="right">
    <h2>Lists Two</h2>
    <section id="{{item.id}}" ng-repeat="item in main.ordered | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">

      <strong>{{item.title}} </strong>
      <span>$ {{item.price}}</span>

    </section>
  </div>

我正在尝试学习 Angular - 为什么我的对象没有使用 ng-repeat 出现？

I'm trying to learn Angular - why isn't my object not appearing using ng-repeat?

javascript

angularjs

ng-repeat

angularjs-ng-repeat