1
나는 다음 각 JS 응용 한 : 내가 JSON 파일의 아이를 표시하고 싶었각도 JS 부트 스트랩 모달 오류
<!DOCTYPE html>
<html ng-app="StudentProgram">
<head>
<title>Student Program Management</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script data-require="[email protected]*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/ng-template" id="myModalContent.html">
<h1 ng-bind="subcategory.name2"></h1>
<ul>
<li ng-repeat="child in subcategory.children" ng-bind="child"></li>
</ul>
</script>
</head>
<body>
<div class="col-lg-9 col-md-9 col-sm-10">
<div class="" id="content">
<div class="pull-right">
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-search"></span>
</div>
<br/><br/>
<div ng-controller="mycontroller">
<div ng-repeat="detail in details">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="badge badge-machb pull-right">{{detail.completed}}/{{detail.required}}</span>{{detail.name1}}</h3>
</div>
<div ng-repeat="subcategory in detail.subcategory1" class="panel-body">
<h4><strong>{{subcategory.name2}}
<a class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal" >Add Course <span class="glyphicon glyphicon-plus"></span></a>
<button ng-bind="subcategory.name2" ng-click="open($index)"></button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{subcategory.name2}}</h4>
</div>
<div class="modal-body" align="center">
<font size="2" align="center">Required Credits : <span class="badge badge-machb">{{subcategory.required2}} </span>
Completed Credits : <span class="badge badge-machb">{{subcategory.completed2}} </span>
Planned Credits : <span class="badge badge-machb">{{subcategory.planned2}} </span></font>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</strong></h4>
<table class="table table-hover">
<tr>
<th>Course</th>
<th>Term</th>
<th>Credit</th>
<th>Grade</th>
</tr>
<tr ng-repeat="subcategory2 in subcategory.subcategory2">
<td>{{subcategory2.course}}</td>
<td>{{subcategory2.term}}</td>
<td>{{subcategory2.credit}}</td>
<td>{{subcategory2.grade}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script>
var app = angular.module('StudentProgram', ['ui.bootstrap']);
app.controller('mycontroller', function($scope, $modal, $log){
$scope.details=[
{name1:"TIER 1 - CORE FOUNDATIONS", completed:"9", required:"13", subcategory1:[
{name2:"Critical Reading and Writing",completed2:"6",required2:"6",planned2:"6",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
{course:"HIST 1301",term:"Spring 2012",credit:"3.0",grade:"B"},
{course:"ENGL 1301",term:"Spring 2012",credit:"3.0",grade:"A"}
]},
{name2:"Speaking and Listening",completed2:"4",required2:"4",planned2:"4",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
'LATI-1412','PORT-1412'], subcategory2:[
{course:"SPCH 1311",term:"Spring 2012",credit:"4.0",grade:"A"}
]},
{name2:"Quantitative Reasoning",completed2:"0",required2:"4",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
]},
{name2:"Wellness and The Human Experience",completed2:"0",required2:"3",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
]}
]},
];
$scope.open = function ($index) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
detail: function() {
return $scope.details[$index];
}
}
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, detail) {
$scope.detail = detail;
};
</script>
<br/>
</div>
</body>
</html>
나는 등 말하기 말할 버튼, 중요한 읽기와 쓰기를 클릭 그 컨트롤러에 언급되어 있습니다. 하지만 내 코드에 약간의 오류가 있으며 아이들을 표시하지 않습니다.
return $scope.details[$index];
그러나 $ 범위 :
당신이 당신의 하위 범주에 대한 당신의 해결 방법에 0, 1, 2, 3을, 할 수있는,
오류를 설명 할 수 있습니까? – Remento
내가 사용한 문구를 유감스럽게 생각합니다. 콘솔에 오류가 없습니다. 버튼을 클릭 할 때 모달이 나타납니다. 그러나 요소가 표시되지 않습니다. – Abhishek