AngularJs读取json文件

时间:2015-04-28 05:59:35

标签: javascript json angularjs

我有一个用json动态创建的树。有一个控制器,在这个控制器中有一个json数组。我使用这个json创建一个树,但我需要从文件外部读取这个json。 / p>

我的控制器;

..........
$scope.myjson = 
{       
    "option1": [
        {   
            "child":[{"label":"Test1" },{"label":"Test2"}],
            "id": "option1"

        }
    ],

"option2": [
        {   
            "child":[{"label":"Test1.1",}],
            "id": "option2"
        }
    ],
   ...........
   }

Json数组读取部分(在控制器中);

angular.forEach($scope.myjson, function(value, key) 
        {
         if (key === 'option1') 
                {
                for(var t=0;t<$scope.myjson[key][0].child.length;t++)
                    {
                     ......Somethings.........
                     }
                 }

我想调用json文件并读取它来创建一个树。如何调用json文件并读入angularjs?

2 个答案:

答案 0 :(得分:2)

使用$ http在Angular中读取JSON非常简单。请记住,$ http将返回一个承诺,您需要在处理之前解决它。

以下是示例代码:

$http.get('assets/messages.json').then(function (data) {
            /** work with data **/
});

答案 1 :(得分:0)

Here您可以获得有关您的问题的完整教程。你只需要按自己的方式修改它。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>