0

このplunkrを参照してくださいNG-繰り返しで親配列のクリックでネストされた配列、私はそれがそのネストされた部分、すなわちを表示する必要がある読書韓国でクリックした場合、私が欲しいものplunkrAngularjs -

あるを表示する方法母音、子音、簡単な言葉、ハーダー言葉

angular.module('Tutorials', []).controller('getAnswers', function ($scope, $element) { 
 
    $scope.sectionNumber = 0; 
 
    $scope.tutorialNumber = 0; 
 
    $scope.questionNumber = 0; 
 
\t $scope.sections = sections; 
 
\t $scope.loadFromMenu = function (tut) { 
 
     alert(tut); 
 
\t \t \t if (tut === $scope.tutorialNumber && tut !== 0) { 
 
\t \t \t \t return; 
 
\t \t \t } //if clicked on already playing tut 
 
\t \t \t if (tut !== undefined) { 
 
\t \t \t \t $scope.tutorialNumber = tut; 
 
\t \t \t } 
 
\t \t \t var section = sections[$scope.sectionNumber]; 
 
\t \t \t for (var i in section.tutorials) { 
 
\t \t \t \t section.tutorials[i].active = "inactive"; 
 
\t \t \t } 
 
\t \t \t section.active = "active"; 
 
\t \t \t section.tutorials[$scope.tutorialNumber].active = "active"; 
 
\t \t \t $scope.$apply(); 
 
\t \t \t $scope.questionNumber = 0; 
 
\t \t \t if ($scope.sectionNumber === 1){ 
 
\t \t \t \t conjugationController(); 
 
\t \t \t } 
 
\t \t }; 
 

 
}); 
 

 
var sections = [{ 
 
    active: "inactive", 
 
    name: "Reading Korean", 
 
    romanizeService: "http://www.kawa.net/works/ajax/romanize/romanize.cgi?q=%ED%96%88%EB%8B%A4?&mode=hangul", 
 
    tutorials: [{ 
 
     active: "inactive", 
 
     name: "Vowels" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Consonants" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Simple Words" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Harder Words" 
 
    }] 
 
},{ 
 
\t active: "inactive", 
 
\t name: "Conjugations", 
 
\t tutorials: [{ 
 
\t \t active: "inactive", 
 
\t \t name: "ㅗ and ㅏ regular", 
 
\t \t verbs: ["작다", "놀다", "닦다"] 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅜ, ㅓ and ㅣ regular", 
 
\t \t verbs: ["웃다", "울다", "멀다"] 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅏ and ㅓ reductive" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅗ and ㅜ reductive" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅣ reductive" 
 
\t }] 
 
}, { 
 
\t active: "inactive", 
 
\t name: "Sentence Building", 
 
\t tutorials: [{ 
 
\t \t active: "inactive", 
 
\t \t name: "Particles" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "Word Order" 
 
\t }] 
 
}];
<!DOCTYPE html> 
 
<html ng-app="Tutorials"> 
 
    
 
    <head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Custom Plunker</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script-ng.js"></script> 
 
    </head> 
 
    
 
    <body ng-controller="getAnswers"> 
 
    <ul ng-repeat="section in sections" ng-init="sectionIndex = $index"> 
 
     <li class="section_title {{section.active}}" > 
 
      {{section.name}} 
 
     </li> 
 
     <ul> 
 
     <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials"> 
 
       {{tutorial.name}} 
 
     </li> 
 
     </ul> 
 
    </ul> 
 
    </body> 
 

 
</html>

そして2つのコンジュゲーションと文ビルドを残りに類似ing。私がそれをクリックしていない限り、そのネストされた配列を表示します。

答えて

1

あなたはこれを意味しますか?

angular.module('Tutorials', []).controller('getAnswers', function ($scope, $element) { 
 
    $scope.sectionNumber = 0; 
 
    $scope.tutorialNumber = 0; 
 
    $scope.questionNumber = 0; 
 
\t $scope.sections = sections; 
 
\t $scope.loadFromMenu = function (tut) { 
 
     alert(tut); 
 
\t \t \t if (tut === $scope.tutorialNumber && tut !== 0) { 
 
\t \t \t \t return; 
 
\t \t \t } //if clicked on already playing tut 
 
\t \t \t if (tut !== undefined) { 
 
\t \t \t \t $scope.tutorialNumber = tut; 
 
\t \t \t } 
 
\t \t \t var section = sections[$scope.sectionNumber]; 
 
\t \t \t for (var i in section.tutorials) { 
 
\t \t \t \t section.tutorials[i].active = "inactive"; 
 
\t \t \t } 
 
\t \t \t section.active = "active"; 
 
\t \t \t section.tutorials[$scope.tutorialNumber].active = "active"; 
 
\t \t \t $scope.$apply(); 
 
\t \t \t $scope.questionNumber = 0; 
 
\t \t \t if ($scope.sectionNumber === 1){ 
 
\t \t \t \t conjugationController(); 
 
\t \t \t } 
 
\t \t }; 
 

 
}); 
 

 
var sections = [{ 
 
    active: "inactive", 
 
    name: "Reading Korean", 
 
    expand: true, 
 
    romanizeService: "http://www.kawa.net/works/ajax/romanize/romanize.cgi?q=%ED%96%88%EB%8B%A4?&mode=hangul", 
 
    tutorials: [{ 
 
     active: "inactive", 
 
     name: "Vowels" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Consonants" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Simple Words" 
 
    },{ 
 
     active: "inactive", 
 
     name: "Harder Words" 
 
    }] 
 
},{ 
 
\t active: "inactive", 
 
\t name: "Conjugations", 
 
\t tutorials: [{ 
 
\t \t active: "inactive", 
 
\t \t name: "ㅗ and ㅏ regular", 
 
\t \t verbs: ["작다", "놀다", "닦다"] 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅜ, ㅓ and ㅣ regular", 
 
\t \t verbs: ["웃다", "울다", "멀다"] 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅏ and ㅓ reductive" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅗ and ㅜ reductive" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "ㅣ reductive" 
 
\t }] 
 
}, { 
 
\t active: "inactive", 
 
\t name: "Sentence Building", 
 
\t tutorials: [{ 
 
\t \t active: "inactive", 
 
\t \t name: "Particles" 
 
\t }, { 
 
\t \t active: "inactive", 
 
\t \t name: "Word Order" 
 
\t }] 
 
}];
<!DOCTYPE html> 
 
<html ng-app="Tutorials"> 
 
    
 
    <head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Custom Plunker</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script-ng.js"></script> 
 
    </head> 
 
    
 
    <body ng-controller="getAnswers"> 
 
    <ul ng-repeat="section in sections" ng-init="sectionIndex = $index"> 
 
     <li class="section_title {{section.active}}" ng-click="section.expand=!section.expand" > 
 
      {{section.name}} 
 
     </li> 
 
     <ul ng-show="section.expand"> 
 
     <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials"> 
 
       {{tutorial.name}} 
 
     </li> 
 
     </ul> 
 
    </ul> 
 
    </body> 
 

 
</html>
このため

+0

はいexactly.Thanks。さらに、あなたが手伝ってくれるなら、もう1つ。私はデフォルトで欲しい韓国語と子どもを表示する必要がありますが表示される必要があります。 @ MeTe-30 – Mohammed

+0

@モハメッド私はあなたの限界を知りませんが、韓国語を読んで 'expand:true 'を追加することで問題を解決し、アップデートをチェックします。 –

+0

が解決されました。ありがとうございます – Mohammed