使用 ng-repeat 可以遍历数组, 这个很容易理解, 但是有时候后台为了方便, 只是向前端返回了 JSON 格式的数据, 那么如何遍历 JSON 数据呢?
angular 的 JSON 遍历方法: 使用 ng-repeat 遍历 JSON. 可以让 ngrepeat 使用以下语法迭代对象的属性:<div ng-repeat="(key,value)in myObj">...</div>.
遍历 JSON 的格式
- <li ng-repeat="(key,item) in serverItems">
- <div style="float: left;">{{item.name}}</div>
- <p class="font_10" style="float: left;">{{item.price}} 元 /{{item.unit}}</p>
- <div style="clear: both"></div>
- </li>
遍历 JSON 实例:
- <!DOCTYPE html>
- <HTML ng-App="jiazhengApp">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script src="../public/ionic/js/ionic.bundle.min.js">
- </script>
- <script src="../public/js/jquery.min.js">
- </script>
- <link rel="stylesheet" href="../public/ionic/CSS/ionic.css">
- <title>
- tabs_ionic.HTML
- </title>
- </head>
- <body ng-controller="myController">
- <ul>
- <li ng-repeat="(key,item) in serverItems">
- <div style="float: left;">
- {{item.name}}
- </div>
- <p style="float: left;">
- {{item.price}} 元 /{{item.unit}}
- </p>
- <div style="clear: both">
- </div>
- </li>
- </ul>
- </body>
- <script>
- var App = angular.module("jiazhengApp", ["ionic"],
- function() {})
- // 默认控制器
- .controller("myController", ['$scope', '$ionicPopover', '$timeout',
- function($scope, $ionicPopover, $timeout) {
- var jsonData = {
- "status": 1,
- "msg": "获取除尘除螨家政类型成功",
- "data": {
- "drc": {
- "id": 35,
- "name": "单人床",
- "price": 100,
- "unit": "数量",
- "num": 0
- },
- "src": {
- "id": 36,
- "name": "双人床",
- "price": 150,
- "unit": "数量",
- "num": 0
- },
- "sf": {
- "id": 37,
- "name": "沙发",
- "price": 150,
- "unit": "数量",
- "num": 0
- },
- "cl": {
- "id": 38,
- "name": "窗帘",
- "price": 15,
- "unit": "平米",
- "num": 0
- },
- "dt": {
- "id": 39,
- "name": "地毯",
- "price": 50,
- "unit": "平米",
- "num": 0
- }
- }
- };
- // 获取多个 JSON 值在页面中显示出来
- $scope.serverItems = jsonData.data;
- }])
- </script>
- </HTML>
结果如下:
来源: http://www.css88.com/qa/angular-js/10694.html