2016-02-29 47 views
0

我正在使用ng-init在我的輸入字段中獲取一些默認值。它的工作正常。但是當我將ng-autocomplete添加到輸入字段時,默認值不再顯示在輸入字段中。當使用ng-autocomplete時,在輸入欄中沒有預先填寫默認值

的index.html

<!DOCTYPE html> 
<html ng-app=testApp> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 
    <script src="script.js"></script> 
    <script src="ngAutocomplete.js"></script> 
    </head> 

    <body> 
    <div ng-controller="searchCtrl" ng-init="roomsInit('london')"> 
        <input type="text" ng-autocomplete ng-model="searchLocation" class="form-control input-lg" options="locationFilter"> 
</div> 

    </body> 

</html> 

的script.js

app = angular.module("testApp", ['ngAutocomplete']); 

app.controller('searchCtrl', function ($scope, $http) { 


    $scope.locationFilter = { 
     country: 'uk', 
     types: '(cities)' 
    }; $scope.details2 = ''; 



    $scope.roomsInit = function (location) { 
    $scope.searchLocation = location; 

    //below code is not relevant to this case 
     $http({ 
      url: "/search.json", 
      method: "GET", 
      params: {location: $scope.searchLocation, 
       q: { 
        daily_price_gteq: $scope.min_price, 
        daily_price_lteq: $scope.max_price, 
        room_type_eq_any: [$scope.private, $scope.entire, $scope.shared] 
       } 
      }, 
      paramSerializer: '$httpParamSerializerJQLike' 
     }).success(function (response) { 
      $scope.rooms = response.rooms; 

     }); 
    }; 

}); 

如果我刪除了NG-自動完成它的工作原理fine.Could有人看看 Here is the plunker

回答

1

你的指令使用不支持ng-model,並要求您將模型傳遞給ng-autocomplete:

<input type="text" ng-autocomplete="result" details="details" class="form-control input-lg" options="locationFilter"> 

當您在框中鍵入時,它將運行自動完成。

我相信你以後的指令是這一個:https://github.com/wpalahnuk/ngAutocomplete/blob/master/src/ngAutocomplete.js

UPDATE
您正在使用的指令有其清除值,手錶運行後的第一次:

scope.$watch(scope.watchOptions, function() { 
    initOpts() 
    newAutocomplete() 
    element[0].value = ''; // <-- This resets the value 
    scope.ngAutocomplete = element.val(); 
}, true); 

如果您不在意修改指令,請將其更改爲:

scope.$watch(scope.watchOptions, function (newValue, oldValue) { 
    if (newValue !== oldValue) { 
     initOpts() 
     newAutocomplete() 
     element[0].value = ''; 
     scope.ngAutocomplete = element.val(); 
    } 
}, true); 

這會阻止它消除該值,除非更改選項/ locationFilter

+0

是的..但是,但如何使初始ng-init值加載到輸入字段?在由ng-autocomplete.js提供的pluncker中,他們提到了這個以及ng-autocomplete ng-model =「」... – Abhilash

+0

在我提供的pluncker中,自動完成工作正常。但是如何使默認價值工作? – Abhilash

+1

默認值在技術上有效,但您使用的指令會清除該值。看我的編輯。 –