0

請參閱本plunkr, plunkr 我要的是Angularjs - 如何顯示在NG-重複對父陣列的點擊嵌套數組

如果我點擊閱讀韓國的話,應該顯示其嵌套部分即元音,輔音,簡單地說,哈德詞

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>

而且類似剩下的兩個變位和句子構建ING。直到並且除非我不點擊它shoudnt顯示它的嵌套陣列

回答

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

yes該exactly.Thanks。此外還有一件事,如果你能幫助。我要默認閱讀韓國和兒童應顯示。 @ MeTe-30 – Mohammed

+0

@Mohammed我不知道你的限制,但是向Reading Korean添加'expand:true'會解決問題,檢查更新。 –

+0

解決了。謝謝 – Mohammed