My goal was to add an object to an array upon clicking an event, which I successfully achieved. However, the objects are not displaying in the ng-repeat as ordered. Can you help me figure out what's missing?
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>