无法使用Angular-UI bootstrap typeahead：具有多个属性的JSON

Question

我有这样的JSON响应：

{
    "Unidades": [
    {
        "Nome": "laskjdhflksjfg",
        "Codigo": "11106600"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106601"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106602"
    }
    ]
}

我正在尝试使用Angular-UI bootstrap typehead：

CONTROLLER

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $http.get($scope.url).success(function (data, status) { 
            $scope.Unidades = data[0].Unidades;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        });
}

HTML

<div  ng-controller="TypeaheadCtrl">        
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control">        
</div>

我的问题是：我需要<pre>Model: {{selected | json}}</pre>显示Unidade.Codigo值，我需要<input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control">显示Unidade.Nome值。我该怎么做？

这就是我得到的：

这就是我需要的：

我按照以下示例进行了更改：http://plnkr.co/edit/ibIMDNmK26E4mTdDK5dD?p=preview，但仍无法正常工作：

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Model: {{Selected| json}}</pre>
    <input type="text" ng-model="Selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in getUnidades($viewValue) | filter:$viewValue | limitTo:8" class="form-control" />
</div>

CONTROLLER

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $http.get($scope.url).success(function (data, status) { 
        $scope.Unidades = data[0].Unidades;
    }).error(function (data, status) {
        $scope.response = 'Request failed';
    });
    $scope.getUnidades = function($viewValue) {
        return $http.get($scope.Unidades).then(function(response){
          return data;
        });
      };
}

错误

GET http://localhost/[object%20Object],[object%20Object],[…t],[object%20Object],[object%20Object],[object%20Object],[object%20Object] 400 (Bad Request) 

我也试过这样做：

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $scope.getUnidades = function($viewValue) {
        return $http.get($scope.url).success(function (data, status) { 
            return data;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        }); 
    };
}

但是我收到了这个错误：

ReferenceError: response is not defined

Answer 1

请在此处查看您要求的功能：

http://plnkr.co/edit/1Sm17103S73nJbpb2PmK?p=preview

它适用于我，使用相同的代码，您需要的是什么？

Answer 2

我猜你的问题是你很难处理从服务器返回的动态数据。如果是这种情况，您需要意识到typeahead指令适用于promise API，并且非常容易处理异步结果。

这是您可以在控制器中使用的功能示例：

$scope.getUnidades = function($viewValue) {
    return $http.get('Unidades.json').then(function(response){
      return response.data;
    });
  };

然后在你的标记中：

 <input typeahead="Unidade.Codigo as Unidade.Nome for Unidade in getUnidades($viewValue)" ng-model="selected" >

以下是插件示例：http://plnkr.co/edit/ibIMDNmK26E4mTdDK5dD?p=preview

Answer 3

好的，这就是我所做的，也是有效的。

    <div  ng-controller="TypeaheadCtrl">        
        <pre>Model: {{selected.Codigo | json}}</pre>
        <input type="text" ng-model="selected" typeahead="Unidade as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control">        
    </div>

我刚刚将typehead更改为Unidade as Unidade.Nome for Unidade in Unidades，在模型中我只使用了我需要的内容：selected.Codigo

谢谢大家！