不能用角UI引导typehead：JSON具有多个属性，

本文介绍了不能用角UI引导typehead：JSON具有多个属性，的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这样的JSON响应：

  {
    Unidades：[
    {
        诺姆：laskjdhflksjfg，
        Codigo：11106600
    }，
    {
        诺姆：wertwertwertwer，
        Codigo：11106601
    }，
    {
        诺姆：wertwertwertwer，
        Codigo：11106602
    }
    ]
}

和我试图用角UI引导typehead这样做：

控制器

 函数TypeaheadCtrl（$范围，$ HTTP）{
    $ scope.selected =不确定;
    $ scope.url ='unidades / unidades-controler.asp'; // JSON的反应就是从这里开始
    $ http.get（$ scope.url）.success（功能（数据，状态）{
            $ scope.Unidades =数据[0] .Unidades;
        }）错误（功能（数据，状态）{
            $ scope.response ='请求失败';
        }）;
}

HTML

 ＆LT; DIV NG控制器=TypeaheadCtrl＆GT;
    ＆LT; pre＆GT;产品型号：{{选择| JSON}}＆LT; / pre＆GT;
    ＆LT;输入类型=文本NG模型=选择预输入=Unidade.Codigo在Unidades Unidade.Nome为Unidade |过滤器：$ viewValue | limitTo：8级=表格控＆GT;
＆LT; / DIV＆GT;

我的问题是：我需要＆LT; pre＆GT;产品型号：{{选择| JSON}}＆LT; / pre＆GT; 显示 Unidade.Codigo 价值，我需要＆LT;输入TYPE =文本NG模型=选择预输入=Unidade.Codigo在Unidades Unidade.Nome为Unidade |过滤器：$ viewValue | limitTo：8级=表格控＆GT; 显示 Unidade.Nome 值。我该怎么做呢？

这是我得到了什么：

而这正是我需要的：

我按照普拉克这个例子使这个改变：，但仍然没有工作：

HTML

 ＆LT; DIV CLASS ='集装箱液'NG控制器=TypeaheadCtrl＆GT;
    ＆LT; pre＆GT;产品型号：{{精选| JSON}}＆LT; / pre＆GT;
    ＆LT;输入类型=文本NG模型=选择预输入=Unidade.Codigo作为Unidade.Nome为Unidade在getUnidades（$ viewValue）|过滤器：$ viewValue | limitTo：8级=表格控 /＆GT;
＆LT; / DIV＆GT;

控制器

 函数TypeaheadCtrl（$范围，$ HTTP）{
    $ scope.selected =不确定;
    $ scope.url ='unidades / unidades-controler.asp'; // JSON的反应就是从这里开始
    $ http.get（$ scope.url）.success（功能（数据，状态）{
        $ scope.Unidades =数据[0] .Unidades;
    }）错误（功能（数据，状态）{
        $ scope.response ='请求失败';
    }）;
    $ scope.getUnidades =功能（$ viewValue）{
        返回$ http.get（$ scope.Unidades）。然后（功能（响应）{
          返回的数据;
        }）;
      };
}

错误

  GET http://localhost/[object%20Object],[object%20Object],[…t],[object%20Object],[object%20Object],[object%20Object],[object%20Object] 400（错误请求）

我也试着这样做：

 函数TypeaheadCtrl（$范围，$ HTTP）{
    $ scope.selected =不确定;
    $ scope.url ='unidades / unidades-controler.asp'; // JSON的反应就是从这里开始
    $ scope.getUnidades =功能（$ viewValue）{
        返回$ http.get（$ scope.url）.success（功能（数据，状态）{
            返回的数据;
        }）错误（功能（数据，状态）{
            $ scope.response ='请求失败';
        }）;
    };
}

但我收到此错误：

 的ReferenceError：响应没有定义

解决方案

好吧，这是我做的，并且工作。

 ＆LT; DIV NG控制器=TypeaheadCtrl＆GT;
        ＆LT; pre＆GT;产品型号：{{selected.Codigo | JSON}}＆LT; / pre＆GT;
        ＆LT;输入类型=文本NG模型=选择预输入=Unidade在Unidades Unidade.Nome为Unidade |过滤器：$ viewValue | limitTo：8级=表格控＆GT;
    ＆LT; / DIV＆GT;

我只是改变了 typehead 到 Unidade作为Unidade.Nome为Unidade在Unidades 和模型里面我只用我所需要的：开始 selected.Codigo

感谢大家！

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!

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