不能使用 Angular-UI bootstrap typehead:具有多个属性的 JSON

问题描述

我有一个这样的 JSON 响应:

{Unidades":[{"Nome": "laskjdhflksjfg",科迪戈":11106600"},{"Nome": "wertwertwertwer",科迪戈":11106601"},{"Nome": "wertwertwertwer",科迪戈":11106602"}]}

我正在尝试使用 Angular-UI bootstrap typehead 来执行此操作:

控制器

function TypeaheadCtrl($scope, $http) {$scope.selected = 未定义；$scope.url = 'unidades/unidades-controler.asp';//json的响应来自这里$http.get($scope.url).success(function (data, status) {$scope.Unidades = data[0].Unidades;}).错误(函数(数据，状态){$scope.response = '请求失败';});}

HTML

<预>型号:{{selected |json}}</pre><input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade | filter:$viewValue | limitTo:8" class="form-control">

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

这是我得到的:

这就是我需要的:

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

HTML

<预>型号:{{已选择|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"/>

控制器

function TypeaheadCtrl($scope, $http) {$scope.selected = 未定义；$scope.url = 'unidades/unidades-controler.asp';//json的响应来自这里$http.get($scope.url).success(function (data, status) {$scope.Unidades = data[0].Unidades;}).错误(函数(数据，状态){$scope.response = '请求失败';});$scope.getUnidades = 函数($viewValue){返回 $http.get($scope.Unidades).then(function(response){返回数据；});};}

错误

GET http://localhost/[object%20Object],[object%20Object],[...t],[object%20Object],[object%20Object],[object%20Object],[object%20Object] 400(错误请求)

我也试过这样做:

function TypeaheadCtrl($scope, $http) {$scope.selected = 未定义；$scope.url = 'unidades/unidades-controler.asp';//json的响应来自这里$scope.getUnidades = 函数($viewValue){返回 $http.get($scope.url).success(function (data, status) {返回数据；}).错误(函数(数据，状态){$scope.response = '请求失败';});};}

但我收到此错误:

ReferenceError: 响应未定义

解决方案

好的，这就是我所做的，并且成功了.

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

我只是将 typehead 更改为 Unidade as Unidade.Nome for Unidade in Unidade 并且在模型中我只使用我需要的东西:selected.科迪戈

谢谢大家！

I have a JSON response like this:

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

and I'm trying to use Angular-UI bootstrap typehead doing this:

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>

My problem is: I need that <pre>Model: {{selected | json}}</pre> shows Unidade.Codigo value, and I need that <input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control"> Shows Unidade.Nome value. How do I do that?

This is what I got:

And this is what I need:

I made this changes by following this example plunk: http://plnkr.co/edit/ibIMDNmK26E4mTdDK5dD?p=preview, but still not working:

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

ERROR

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

I have also tried doing this:

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

But I receive this error:

ReferenceError: response is not defined

解决方案

Ok, this is what I did, and worked.

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

I just changed the typehead to Unidade as Unidade.Nome for Unidade in Unidades and inside the model I'm using only what I need: selected.Codigo

Thank you all!

这篇关于不能使用 Angular-UI bootstrap typehead:具有多个属性的 JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！