角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> 

這將新調用的值添加到<li> 每個值都被添加到<li> 但是替換了以前的值。

含義：
會發生什麼：
首先，我又說：舊金山 - >列表：

舊金山

其次，我加了聖克拉拉 - >列表：

聖克拉拉

聖誕老人克拉拉

第三，我加入聖莫尼卡 - >列表：

聖莫尼卡

聖莫尼卡

聖莫尼卡

的期望是什麼：
首先，我又說：舊金山 - >列表：

舊金山

其次，我加了聖克拉拉 - >列表：

聖克拉拉

舊金山

第三，我加入聖莫尼卡 - >列表：

聖莫尼卡

聖克拉拉

舊金山

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