javascript - 如何将自动完成值添加到列表中？

Question

<div class="maincontent">
    <div ng-app="autocompleteCustomTemplateDemo" ng-controller="DemoCtrl as ctrl" class="container container1">
        <div class="row">
            <div class="col-lg-12 col-sm-12">
                <h4><strong> Service</strong></h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <md-content layout-padding layout="column">
                    <form ng-submit="$event.preventDefault()">
                        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text- change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)"
                        md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.product_name" md-min-length="0" placeholder="Pick an Angular repository" md-menu-class="autocomplete-custom-template">
                            <md-item-template>
                                <span class="item-title">
                            <span> {{item.product_gid}} </span>
                                </span>
                                <span class="item-metadata" ng-model="g1" ng-click="type(g1)">
                            <span>
                            <strong>{{item.product_name}}</strong>
                            </span>
                                </span>
                            </md-item-template>
                        </md-autocomplete>
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <md-button ng-click="add()">ADD</md-button>
                            </div>
                        </div>
                        <br/>
                        <div class="row table-responsive" ng-show="show_servicelist">
                            <div class="col-md-12 col-lg-12 col-sm-12">
                                <table class="table table-striped table-bordered table-condensed table-hover md-primary" md-progress="deferred">
                                    <thead class="header">
                                        <tr style="text-align:center">
                                            <th>S No</th>
                                            <th>product name</th>
                                            <th>Quantity</th>
                                            <th style="text-align:center">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td ng-model="dept_name">{{$index + 1}}</td>
                                            <td>
                                                {{ctrl.selectedItem.product_name}}
                                            </td>
                                            <td style="text-align:center">
                                                <input ng-model="tobuy_remark" />
                                            </td>
                                            <td style="text-align:center">
                                                <input ng-model="tobuy_remarks" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <md-button>Submit</md-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </md-content>
            </div>
        </div>
    </div>
</div>

JS

(function() {
    'use strict';
    angular
        .module('autocompleteCustomTemplateDemo', ['ngMaterial'])
        .controller('DemoCtrl', DemoCtrl);

    function DemoCtrl($timeout, $q, $log, $scope) {
        var self = this;
        $scope.add = function() {
            $scope.show_servicelist = true;
            $scope.service = [];
            alert(JSON.stringify(self.repos));
            $scope.service.push({
                product_name: self.repos.product_name
            });



        }
        self.simulateQuery = false;
        self.isDisabled = false;

        self.repos = loadAll();
        self.querySearch = querySearch;
        self.selectedItemChange = selectedItemChange;
        self.searchTextChange = searchTextChange;


        function querySearch(query) {
            var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
                deferred;
            if (self.simulateQuery) {
                deferred = $q.defer();
                $timeout(function() {
                    deferred.resolve(results);
                }, Math.random() * 1000, false);
                return deferred.promise;
            } else {
                return results;
            }
        }

        function searchTextChange(text) {
            $log.info('Text changed to ' + text);
        }

        function selectedItemChange(item) {
            $log.info('Item changed to ' + JSON.stringify(item));
        }


        function loadAll() {
            var repos = [{
                    'product_gid': '1',

                    'product_name': 'stabilizer',
                    'forks': '16,175',
                }, {
                    'product_gid': '2',

                    'product_name': 'stand',
                    'forks': '760',
                }, {
                    'product_gid': '3',

                    'product_name': 'ac',
                    'forks': '1,241',
                },

            ];
            return repos.map(function(repo) {
                repo.value = repo.product_name.toLowerCase();
                return repo;
            });
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (item.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

我正在运行以下代码以在选择添加按钮后在自动完成中显示值。单击添加按钮后，我需要值一个接一个地列出。我为此使用了一种 Material 。请指导我，并修改代码。上面的代码只是显示列表为空，如何在列表中存储一个值并按顺序分配。

Answer 1

我会为您更改 2 个功能，它应该可以工作。

首先要在全局范围内创建数组。

self.repos = [{
        'product_gid': '1',

        'product_name': 'stabilizer',
        'forks': '16,175',
    }, {
        'product_gid': '2',

        'product_name': 'stand',
        'forks': '760',
    }, {
        'product_gid': '3',

        'product_name': 'ac',
        'forks': '1,241',
    },

];

function loadAll() {

    return self.repos.map(function(repo) {
        repo.value = repo.product_name.toLowerCase();
        return repo;
    });
}

add(object) {
    self.repos.push(object);
    self.loadAll();
}