角js函数不返回在自动完成时显示的值。

Question

下面是我的角脚本，它完成了一个自动完成：

angular.module( "myApp", ['ngAutocomplete']).controller("myController",function ($scope) {

                        $scope.result1 = '';
                        $scope.options1 = null;
                        $scope.details1 = '';


                        $scope.products = [];
                            $scope.addItem = function () {
                                $scope.products.push($scope.addMe);
                            }


                  });



                    angular.module( "ngAutocomplete", []).directive('ngAutocomplete', function($parse) {

                        return {

                          scope: {
                            details: '=',
                            ngAutocomplete: '=',
                            options: '='
                          },

                          link: function(scope, element, attrs, model) {
                            var opts

                            var initOpts = function() {

                              opts = {}
                              if (scope.options) {
                                if (scope.options.types) {
                                  opts.types = []
                                  opts.types.push(scope.options.types)
                                }
                                if (scope.options.bounds) {
                                  opts.bounds = scope.options.bounds
                                }
                                if (scope.options.country) {
                                  opts.componentRestrictions = {
                                    country: scope.options.country
                                  }
                                }
                              }
                            }
                            initOpts()


                            var newAutocomplete = function() {
                              scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
                              google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                                scope.$apply(function() {

                                    scope.details = scope.gPlace.getPlace();

                                  scope.ngAutocomplete = element.val();
                                });
                              })
                            }
                            newAutocomplete()



                          }
                        };
                      });

使用js的HTML标记是：

  <input type="text" class="form-control" id="Autocomplete" placeholder="Enter Airport Code or City Name" ng-autocomplete="result1" details="details1" options="options1" ng-model="addMe">
   <button type="submit" class="btn btn-default" ng-click="addItem()">Add to Itinerary</button>

                <ul>
                    <li ng-repeat="x in products">{{result1}}</li>
                </ul>

这会将新调用的值添加到添加到的每个值中，但替换前面的值。

意思：

发生了什么：

首先，我添加了:旧金山->列表：

• 旧金山

​

第二，我加入了圣克拉拉-->名单：

• 圣克拉拉
• 圣克拉拉

​

第三，我增加了圣塔莫妮卡->名单：

• 圣莫尼卡
• 圣莫尼卡
• 圣莫尼卡

​

预期：

首先，我添加了:旧金山->列表：

• 旧金山

​

第二，我加入了圣克拉拉-->名单：

• 圣克拉拉
• 旧金山

​

第三，我增加了圣塔莫妮卡->名单：

• 圣莫尼卡
• 圣克拉拉
• 旧金山

​

http://plnkr.co/edit/iyJ1cFVizjcWbh3PCYBJ?p=preview

Answer 1

您正在为所有的{{result1}}元素显示<li>。将{{result1}}替换为{{x}}。在代码中也更改addItem()函数。将$scope.addMe替换为$scope.result1。对于要以相反顺序显示的列表，可以使用自定义筛选器。

<input type="text" class="form-control" id="Autocomplete" placeholder="Enter Airport Code or City Name" ng-autocomplete="result1" details="details1" options="options1" ng-model="addMe">
<button type="submit" class="btn btn-default" ng-click="addItem()">Add to Itinerary</button>

            <ul>
                <li ng-repeat="x in products | reverse">{{x}}</li> <!-- Replace result1 with x --> 
            </ul>


$scope.addItem = function () {
     $scope.products.push($scope.result1); // Replace $scope.addMe with $scope.result1
}

/* Custom Filter */
angular.module( "myApp").filter('reverse', function() {
   return function(items) {
     return items.slice().reverse();
   };
});