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

我正在运行以下代码，以在选择add按钮后在autocomplete中显示值。单击“添加”按钮后，我需要一个接一个地列出该值。我用了一种材料做这个。请引导我，并修改代码。上面的代码只是将列表显示为空，如何在列表中存储值并按顺序分配。

我将为您更改两个函数，它应该可以工作

首先要全局创建数组

(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);
            };

        }
    }
})();

---

你能用这个答案解决你的问题吗？

(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);
            };

        }
    }
})();

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();
}