AngularJS怎么获取json数据-创新互联

2.detail.html, 用于显示一条用户的数据信息，代码如下所示

  
    用户名
    
    
  
  
    男
    
    
  
  `
    邮箱
    
    
  
  
  

3. list.html用于显示所有数据，code很简单如下所示

 
  
  
    用户名
    性别
    邮箱
  
  
   
      {{user.username}}
    {{user.gender}}
    {{user.email}}
  

4. mgt_controller.js

var umService = angular.module('UserMgt', ['ngRoute']);

umService.config(
  function ($routeProvider) {
    $routeProvider
      
      .when('/', {
        controller: ListController,
        templateUrl: '../tml/list.html'
      })
      
      .when('/get/:id', {
        
        controller: GetController,
        
        templateUrl: "../tml/detail.html"
      }) 
      .otherwise({
        
        redirectTo: '/'
      });
  }
)

function ListController($scope, $http) {
  
  $http.get('../conf/user.json').success(function (data) {
    
    console.log(data);
    $scope.users = data;
  });
}

function GetController($scope, $http, $routeParams) {
  var id = $routeParams.id;
  
  $http.get('../conf/user.json').success(function (data) {
    console.log(data);
    $scope.item = data[id];
  });
}

5. user.json中json中存储如下的数据：

[
  { "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" },
  { "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" },
  { "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" },
  { "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" },
  { "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" },
  { "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" }
]

Result

1. 展示所有用户信息

2. 获取某一用户信息

以上是“AngularJS怎么获取json数据”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。