Angular js引导模态错误
Angular js bootstrap modal error
我有以下angular 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="angular-ui-bootstrap@*" 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>
当我点击按钮说，关键的阅读和写作，说话等，我想显示在控制器中提到的json文件的孩子。但是我的代码有一些错误，不允许我显示子节点。
请帮
你调用open($index)，它可以是0,1,2,3，对于你的子类别，在你的resolve方法中你有:
return $scope.details[$index];
但是$scope.details只有一个条目!
你的ng-repeat正在循环detail。Subcategory1，所以这是对应的数组，你的$index表示，你必须传递给你的指令。
如果你把它放在你的resolve方法中，它会工作的:
return $scope.details[0].subcategory1[$index];
和ModalInstanceCtrl:
$scope.subcategory = detail;
工作示例:http://jsfiddle.net/rd13/kScvV/
例如，如果您的details数组中有多个条目，我会考虑同时传入details数组的索引和子类别的索引。或者，在打开函数中传递子类别对象。
问题是你的模型与你的模态模板不同步-这就是为什么没有结果显示。
例如，在你的模态模板中，你绑定到以下属性subcategory.name2
但是如果你看你传递给模态的对象，这些是它的属性
{
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"属性。我建议您重新审视代码的设置方式。
相关文章：
- 未捕获的类型错误:非法调用:模态形式的错误
- 如何捕获请求中的错误，然后打开模态，然后在模态使用RxJS关闭时重试
- 使用Javascript在模态内部的标签上显示错误消息不起作用
- 离子模态未打开(类型错误:无法读取未定义的属性“显示”）
- 模态中的 Django 形式:动态重定向和处理错误
- 模态窗口(弹出窗口）警报在使用 angularJs 的错误字段上显示
- 在模态中加载分部视图时发生错误时重定向到错误页面
- 类型错误: $(..）.模态不是带有引导模态的函数
- 如何在具有设计功能的模态中显示忘记的错误消息
- 图片插入错误与Twitter Bootstrap 3模态和定时编辑器
- 在模态表上初始化数据表时出现Ajax错误
- 在asp.net I上显示模态对话框，给出堆栈溢出错误
- 如果出现错误，返回到模态
- 调用模态时得到401未授权错误
- Cookie和模态发送报头顺序错误
- 我怎么能干我的Rails/AJAX/Bootstrap 3模态错误处理
- 切换模态后出现Javascript错误
- Angular-UI模态错误:期望的响应包含一个对象，但得到一个数组
- 不断得到未定义的索引错误，不知道如何声明值在子模态窗口
- Angular js引导模态错误
