Question

iam目前正致力于我的第一个角度/离子应用程序。

我有一个很大的json文件：

userWorkouts: [{
  title: '3 Split',
  id: 1,
  workoutImg: 'img.jpg',
  workoutSessions: [{
    workoutSessionName: 'Monday',
    workoutSessionColor: "#000000",
    workoutIcon: "icon-monday",
    workoutExerciseList: [{
      exerciseName: "Pull Ups",
      exerciseSets: [20, 12, 8]
    }, {
      exerciseName: "Push Ups",
      exerciseSets: [1, 2, 8]
    }]
  }, {
    workoutSessionName: 'Wednesday',
    workoutSessionColor: "#FFFFFF",
    workoutIcon: "icon-wednesday",
    workoutExerciseList: [{
      exerciseName: "Trizep",
      exerciseSets: [20, 12, 8]
    }, {
      exerciseName: "Xyz",
      exerciseSets: [1, 2, 8]
    }]
  }]
}

现在我想为锻炼的每个部分创建多个视图。

锻炼名称 - ＆gt;锻炼课程（工作日） - ＆gt;这一天的练习。

到目前为止，我有这样的事情：

<ion-item ng-repeat="workout in workoutList" class="workout-list-item item item-thumbnail-left" ui-sref="app.workoutSessionList({workoutIndex: $index})">
    <img class="" src="{{workout.workoutImg}}">
    <h2>{{workout.title}}</h2>
    <ion-option-button class="button-positive icon ion-edit" ng-click="deleteUserWorkout(workout)"></ion-option-button>
    <ion-option-button class="button-assertive icon ion-trash-a" ng-click="deleteUserWorkout(workout)"></ion-option-button>

  </ion-item>

但这对我来说是最重要的。

您有什么想法可以浏览这个json文件吗？

非常感谢！

Answer 1

首先，JSON对象已损坏。（我的意思是你在JS代码中获取json文件后）

If userWorkouts is child of workoutList  Then you should use 
workout in workoutList.userWorkouts in ng-repeat

Else JSON object should have been userWorkouts = [{}]; = inplace of :

Answer 2

处理嵌套的JSON很简单。您需要做的就是确保模板与JSON结构匹配。

在您的情况下，您的模型实际上是一个数组，并且它与数组嵌套，因此我们需要构建的模板是嵌套的foreach模板。在这个例子中，我将省略 workoutSessionColor 和 workoutIcon 。但我相信你会弄清楚如何利用这些信息。

Go ahead and play with it on codepen.以下代码段与代码笔上发布的内容相匹配。

基于json的示例Html：

<div ng-app="myApp" ng-controller="TestController">

  <div ng-repeat="workout in userWorkouts">

    <p ng-bind="workout.title"></p>
    <img src="{{workout.workoutImg}}">

    <table border=1>
      <tr ng-repeat="workoutDays in workout.workoutSessions">
        <td ng-bind="workoutDays.workoutSessionName"></td>
        <td>
          <p ng-repeat="sessionExercise in workoutDays.workoutExerciseList">
            {{sessionExercise.exerciseName}} | {{sessionExercise.exerciseSets}}
          </p>
        </td>
      </tr>
    </table>

  </div>

</div>

示例css（普通）：

img{
  width:50px;
}

角度代码：

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

app.controller("TestController", function($scope){
  $scope.userWorkouts= [{
    title: '3 Split',
    id: 1,
    workoutImg: 'https://cdn3.iconfinder.com/data/icons/workouts/500/push_up-512.png',
    workoutSessions: [{
      workoutSessionName: 'Monday',
      workoutSessionColor: "#000000",
      workoutIcon: "icon-monday",
      workoutExerciseList: [{
        exerciseName: "Pull Ups",
        exerciseSets: [20, 12, 8]
      }, {
        exerciseName: "Push Ups",
        exerciseSets: [1, 2, 8]
      }]
    }, {
      workoutSessionName: 'Wednesday',
      workoutSessionColor: "#FFFFFF",
      workoutIcon: "icon-wednesday",
      workoutExerciseList: [{
        exerciseName: "Trizep",
        exerciseSets: [20, 12, 8]
      }, {
        exerciseName: "Xyz",
        exerciseSets: [1, 2, 8]
      }]
    }]
  }];
});

Ionic / Angular：如何浏览嵌套的json

2 个答案: