Как добавить модель элемента, привязанную к кнопке, в список и отобразить ее в пользовательском интерфейсе? AngularJs

Question

Я создаю приложение для меню ресторана, которое официант может использовать для ввода заказов.

У меня есть кнопки с разными названиями блюд, которые создаются ng-repeat, у которого есть модель, которая извлекается из задней части и база данных. Я хочу иметь возможность нажимать кнопку, скажем, ту, которая гласит "Хот-дог" ... Добавьте это в мой массив itemOrderList в моем коде AngularJs и для того, чтобы содержимое того же массива отображалось на моей передней панели конец пользовательского интерфейса как «Выбранные элементы для заказа». Я могу получать всплывающий список элементов с кнопками удаления рядом с ними каждый раз, когда я нажимаю кнопку элемента питания. Однако названия продукта нет рядом с кнопкой удаления, оно просто пустое. Я не уверен, какую модель предоставить кнопкам питания, чтобы моя функция addOrderToList в моем коде AngularJs знала, какое значение хранить в массиве itemOrderList.

JS код

.controller('orderAddCtrl', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {

            $scope.itemOrderList = [];

            $scope.addOrderToList = function () {
                $scope.itemOrderList.push($scope.whatDoIPutHere?);
                $scope.input = '';
            };

            $scope.removeFromOrderToList = function (index) {
                $scope.itemOrderList.splice(index, 1);
            };

Html

<div class="row">
        <div class="card col-8">
            <h2>Food Items</h2>
            <div class="row">
                <button class="btn btn-success col-3" ng-repeat="i in Items" ng-model="whatDoIPutHere?" ng-click="addOrderToList()">{{i.itemName}}</button>
            </div>
        </div>

        <div class="col-4">
            <div class="form-group">
                <label class="control-label">Customer Name</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" ng-model="order.customerName" />
                </div>
            </div>

            <div class="card col-4"">
                <h2>Order Items</h2>
                <ul>
                    <li ng-repeat="i in itemOrderList track by $index">
                        <button ng-click="removeFromOrderToList($index)">Remove</button>
                    </li>
                </ul>
            </div>

Answer 1

Вы не можете использовать ng-model на button. Он работает только с элементами, которые принимают ввод пользователя.

Вы можете сделать следующее:

<div class="row">
  <button class="btn btn-success col-3" ng-repeat="i in Items" ng-click="addOrderToList(i)">{{i.itemName}}</button> 
</div>

Затем измените функцию addOrderToList на:

 $scope.addOrderToList = function (item) {
     $scope.itemOrderList.push(item);
 };

Покажите itemName в вашем itemOrderList ng-repeat l oop с {{i.itemName}} там, где вы хотите.