Question

请参考这个plunkr， plunkr 我想要的是

如果我点击阅读韩语，那么它应该显示其嵌套部分，即元音，辅音，简单单词，更难的单词

angular.module('Tutorials', []).controller('getAnswers', function ($scope, $element) {
    $scope.sectionNumber = 0;
    $scope.tutorialNumber = 0;
  $scope.questionNumber = 0;
	$scope.sections = sections;
	$scope.loadFromMenu = function (tut) {
      alert(tut);
			if (tut === $scope.tutorialNumber && tut !== 0) {
				return;
			} //if clicked on already playing tut
			if (tut !== undefined) {
				$scope.tutorialNumber = tut;
			}
			var section = sections[$scope.sectionNumber];
			for (var i in section.tutorials) {
				section.tutorials[i].active = "inactive";
			}
			section.active = "active";
			section.tutorials[$scope.tutorialNumber].active = "active";
			$scope.$apply();
			$scope.questionNumber = 0;
			if ($scope.sectionNumber === 1){
				conjugationController();
			}
		};

});

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"
    }]
},{
	active: "inactive",
	name: "Conjugations",
	tutorials: [{
		active: "inactive",
		name: "ㅗ and ㅏ regular",
		verbs: ["작다", "놀다", "닦다"]
	}, {
		active: "inactive",
		name: "ㅜ, ㅓ and ㅣ regular",
		verbs: ["웃다", "울다", "멀다"]
	}, {
		active: "inactive",
		name: "ㅏ and ㅓ reductive"
	}, {
		active: "inactive",
		name: "ㅗ and ㅜ reductive"
	}, {
		active: "inactive",
		name: "ㅣ reductive"
	}]
}, {
	active: "inactive",
	name: "Sentence Building",
	tutorials: [{
		active: "inactive",
		name: "Particles"
	}, {
		active: "inactive",
		name: "Word Order"
	}]
}];

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

与剩下的两个Conjugations和Sentence Building类似。直到和除非我不点击它shoudnt显示其嵌套数组

Answer 1

你的意思是这个：??

angular.module('Tutorials', []).controller('getAnswers', function ($scope, $element) {
    $scope.sectionNumber = 0;
    $scope.tutorialNumber = 0;
  $scope.questionNumber = 0;
	$scope.sections = sections;
	$scope.loadFromMenu = function (tut) {
      alert(tut);
			if (tut === $scope.tutorialNumber && tut !== 0) {
				return;
			} //if clicked on already playing tut
			if (tut !== undefined) {
				$scope.tutorialNumber = tut;
			}
			var section = sections[$scope.sectionNumber];
			for (var i in section.tutorials) {
				section.tutorials[i].active = "inactive";
			}
			section.active = "active";
			section.tutorials[$scope.tutorialNumber].active = "active";
			$scope.$apply();
			$scope.questionNumber = 0;
			if ($scope.sectionNumber === 1){
				conjugationController();
			}
		};

});

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"
    }]
},{
	active: "inactive",
	name: "Conjugations",
	tutorials: [{
		active: "inactive",
		name: "ㅗ and ㅏ regular",
		verbs: ["작다", "놀다", "닦다"]
	}, {
		active: "inactive",
		name: "ㅜ, ㅓ and ㅣ regular",
		verbs: ["웃다", "울다", "멀다"]
	}, {
		active: "inactive",
		name: "ㅏ and ㅓ reductive"
	}, {
		active: "inactive",
		name: "ㅗ and ㅜ reductive"
	}, {
		active: "inactive",
		name: "ㅣ reductive"
	}]
}, {
	active: "inactive",
	name: "Sentence Building",
	tutorials: [{
		active: "inactive",
		name: "Particles"
	}, {
		active: "inactive",
		name: "Word Order"
	}]
}];

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

Angularjs - 如何在ng-repeat中单击Parent数组时显示嵌套数组

1 个答案: