如何以角度

时间:2016-03-09 23:59:05

标签: javascript angularjs json

我对Angular很新,我在尝试将Json文件的值绑定到选择表单时遇到了一些问题。我已经阅读了很多解决方案并且我使用了所有这些但是我没有知道为什么它没有显示任何东西。我带了$ http.get的Json文件,我把这个文件放到一个变量中,我尝试访问一个元素,一切都没问题,所以文件是以严格的方式进行的。 Json就是这个:

{
"regioni": [
    {
        "province": [
            {
                "code": "CH", 
                "comuni": [
                    {
                        "code": "069001", 
                        "cap": "66040", 
                        "nome": "Altino"
                    }, 
                    {
                        "code": "069002", 
                        "cap": "66044", 
                        "nome": "Archi"
                    } 
     ], 
                "nome": "Chieti"
            }
   ], 
        "nome": "Abruzzo"
    }
 ]
} 

所以我有一个包含属性 nome 的区域数组和一个属性,它是一个包含代码 nome的数组,以及代码,cap,nome 组成的 comuni 数组。我想显示所有的所有 comuni 的每个名称。 控制器就是这个:

var app = angular.module("myCreation",[]);
app.controller("myStructureCtrl",['$scope','$http',function($scope,$http){
var comuniList = null;

 $http.get('/resources/italia_comuni.json')
     .then(function(response){
        comuni = response.data;
  });

}]);

HTML:

<div id='selectCity'  style='width:30%;margin-top: 60px'>
        <label for='city'>Select a city</label> 
        <select name="city" id='city' ng-model="data.city" ng-options="regioni.province.comuni.nome for city in comuniList">
        </select> 
    </div>

我不确切知道如何取得这个价值,但我希望这有效。 提前谢谢。

2 个答案:

答案 0 :(得分:1)

首先,在$ http响应中,它是regioni,它接收如下数据:

 $http.get('/resources/italia_comuni.json')
 .then(function(response){
    $scope.regioni = response.data;
 });

然后你应该写这样的ng-options:

ng-options="c.nome for c in regioni[0].province[0].comuni"

点击此链接http://plnkr.co/edit/cSY0GY6E7zRCbZm14Zps?p=preview

答案 1 :(得分:1)

是的,它就像younes sofiane所说:要真正利用响应,你应该使用$ scope.regioni而不是常规的javascript变量。

看一下这个例子:

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

现在是html:

<div ng-controller="GreetingController">
  {{ greeting }}
</div>

为了更好地理解这一点,请查看有关基础知识的角度开发人员指南:https://docs.angularjs.org/guide/controller