イオン/角度：ネストされたjsonをナビゲートする方法

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] 
    }] 
    }] 
} 

を今私は、トレーニングの各セクションの複数のビューを作成したいです。

ワークアウト名 - >ワークアウトセッション（平日） - >この日の練習。

は、これまでのところ、私はこのようなものだ：

<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> 

をしかし、これは私のために仕事をdoenst。

この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] 
     }] 
    }] 
    }]; 
});