如何使用Angular-ui-bootstrap的typeahead指令做ajax回發

Question

我在我的mvc應用程序中使用Angular-UI TypeAhead。

這裏是我的HTML源代碼：

<div data-ng-app="v"> 
    <div ng-controller="TypeAheadController"> 
     <input type="text" id="txtType" ng-model="selected" typeahead-on-select="callBack($item,$model,$label)" typeahead="state as state.Name for state in states | filter:$viewValue | limitTo:8" class="form-control"> 
    </div> 
</div> 

這裏是我的js文件：

var v = angular.module('v', ['ui.bootstrap']); 

v.factory('serverCallMakerFactory', ['$http', serverCallMakerFactory]); 

function serverCallMakerFactory($http) { 
    var serverCallMakerFactory = {}; 
    serverCallMakerFactory.callServer = function (url) { 
     return $http.get(url); 
    }; 
    return serverCallMakerFactory; 
} 

v.controller('TypeAheadController', ['$scope', 'serverCallMakerFactory', $scope,TypeAheadController]); 


function TypeAheadController($scope, serverCallMakerFactory) { 

    $scope.selected = undefined; 
    $scope.states = [{ 'ID': 1, 'Name': 'Alabama' }, { 'ID': 1, 'Name': 'Alaska' }, { 'ID': 1, 'Name': 'Arizona' }, { 'ID': 1, 'Name': 'Arkansas' }]; 
    $scope.callBack = function ($item, $model, $label) { 
     serverCallMakerFactory.callServer("/Customer/DisplayJsonCustomer") 
     .success(function (data) { 
      debugger; 
     }); 
    }; 
} 

我想要做的就是與用戶選擇的國家的ID的JSON調用。

我嘗試使用typeahead-on-select屬性。但在callBack函數中，我無法獲得$ http服務。任何人都可以幫我嗎？

基本上在這篇文章中，我將把數據作爲我將要使用的另一種typeahead的源代碼提取出來。如果有人有更好的解決方案，請提出建議。

Answer 1

只需從您的控制器調用返回數據的角度服務即可。它可以使用$ http或任何其他方法。在這個例子中，它調用一個返回承諾的服務。當它完成時，它會調用then（）代碼，你可以做你想做的事情。

$scope.callBack = function ($item, $model) { 
     var aPromise = someService.getMoreData($item.ID); 
     aPromise.then(function (data) { 

      //use the data or do something else with it 
      $scope.yourProperty = data; 

     }); 

    };