Ionic/Angular:如何在嵌套json中导航

Ionic/Angular: How to navigate through nested json

本文关键字：嵌套 json 导航 Angular Ionic      更新时间：2024-05-14

iam目前正在开发我的第一个angular/ionic应用程序。

我有一个大的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]
    }]
  }]
}

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

锻炼名称->锻炼课程（工作日）->这一天的锻炼。

到目前为止，我得到了这样的东西：

<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文件的最佳方式是什么吗？

非常感谢！

首先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 :

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

在您的案例中，您的模型实际上是一个数组，并且它与数组嵌套，因此我们需要构建的模板是嵌套的foreach模板。在本例中，我将省略workoutSessionColor和workoutIcon。但我相信你会想办法利用这些信息的。

继续用代码笔玩吧。以下代码片段与代码笔上发布的内容相匹配。

基于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]
      }]
    }]
  }];
});
相关文章：