Question

这是JSON文件.. 使用角度js控制器并查看如何解析此json并在下拉菜单中显示相应技术的drop1和drop2值。使用http get获取JSON数据。提前致谢

 {
        "technology": [
            {
                "id": "AKC",
                "detail": {
                    "drop1": [
                        {
                            "id": "AKC-lst-1231"
                        },
                        {
                            "id": "AKC-lst-1232"
                        },
                        {
                            "id": "AKC-lst-1233"
                        }
                    ],
                    "drop2": [
                        {
                            "id": "T_AKC_live"
                        },
                        {
                            "id": "T_AKC_Capt"
                        },
                        {
                            "id": "T_AKC_live1"
                        }
                    ]
                }
            },
            {
                "id": "MET",
                "detail": {
                    "drop1": [
                        {
                            "id": "MET-2st"
                        },
                        {
                            "id": "MET-34"
                        }
                    ],
                    "drop2": [
                        {
                            "id": "sd-232"
                        },
                        {
                            "id": "sd-121"
                        }
                    ]
                }
            }
        ]
    }

Answer 1

请考虑这个例子：

<!DOCTYPE html>
<html ng-app="postExample">
     <head>
          <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
          <script src="usersController.js"></script>
          <script src="userRepoService.js"></script>
    </head>

    <body ng-controller="UsersController">
        <h1>Post Angular Example</h1>
        <select id="UserSelector" style="width: 100%;">
            <option ng-repeat="user in users" value="{{user.id}}">{{user.login}}   </option>
        </select>
    </body>
</html>

userRepoService.js

(function(){

var userRepoService = function($http){

  var getUsers = function(username){
        return $http.get("https://api.github.com/users")
                    .then(function(response){
                       return response.data; 
                    });
  };

  return {
      get: getUsers
  };

};

var module = angular.module("postExample");
module.factory("userRepoService", userRepoService);

}());

控制器：

(function(){

   var app = angular.module("postExample",[]);

   var UsersController = function($scope, userRepoService){

   var onFetchError = function(message){
      $scope.error = "Error Fetching Users. Message:" +message;
 };

   var onFetchCompleted = function(data){
      $scope.users =data;
   };

   var getUsers = function(){
       userRepoService.get().then(onFetchCompleted,onFetchError);
   };

   getUsers();     

};

app.controller("UsersController", UsersController);

}());

Answer 2

您可以直接调用$http服务，并在成功数据参数中获取该响应。

<强> CODE

$http.get("test.json").
success(function(data, status, headers, config) {
  //get data and play with it
}).
error(function(data, status, headers, config) {
  alert("Error fetching data");
  // log error
});

希望这可以帮助你，谢谢。

如何使用http get in angular js填充下拉菜单，其中包含数据到达控制器

2 个答案: