我希望能够在点击事件中将对象推入数组。我能够做到这一点。然而，现在我的对象没有出现在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>正如您在上一个问题中提到的，您应该使用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>我不确定这是否与您的错误有任何联系，但您应该避免使用可能与HTML标记名称冲突的指令名称。
此处的section指令名称与HTML5标记冲突。