Angularjs从表格中的模态和后期获取数据
[英]Angularjs get data from modal and post in table
问题描述
I have the following angularjs html app: 
我有以下angularjs html应用程序：
<!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 src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/badge.css"/>
<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">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{subcategory.name2}} - Add Courses</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<div class="panel col-md-5">
<div class="panel-body">
<p><font size="2">Required Credits : <span class="badge badge-machb pull-right">{{subcategory.required2}} </span></p>
<p>Completed Credits : <span class="badge badge-machb pull-right">{{subcategory.completed2}} </span></p>
<p>Planned Credits : <span class="badge badge-machb pull-right">{{subcategory.planned2}} </span></font></p>
</div>
</div>
<!--<input type="checkbox">{{child}}-->
<div class="panel progress col-md-7" style="height:121px;">
<div class="panel-body">
PROGRESS
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="53.3" aria-valuemin="0" aria-valuemax="100" style="width: 53.3%;">
53.3%
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="float:left;width:525px;">
<div class="panel-body" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto;position:relative;">
<table class="table table-hover checkbox">
<tr>
<th>Course</th>
<th>Credits</th>
</tr>
<tr ng-repeat="child in subcategory.children">
<td class="vcenter"><input type="checkbox" value=""/>{{child}}</td>
<td class="vcenter">3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Save</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</script>
</head>
<body>
<div class="container">
<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}}
<button class="btn btn-default pull-right" ng-disabled="subcategory.required2 == subcategory.completed2" ng-click="open(subcategory)">Add Course <span class="glyphicon glyphicon-plus"></span></button>
</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:"0",children:['ENGL-1301','HIST-1301'], 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:"3",required2:"3",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312','ARAB-1411','ARAB-1412','CHIN-1311','CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312','CZEC-1411','CZEC-1412','FREN-1311','FREN-1312','FREN-1411','FREN-1412','GERM-1311','GERM-1312','GERM-1411','GERM-1412','GREE-1311','GREE-1312','GREE-1411','GREE-1412','ITAL-1311','ITAL-1312','ITAL-1411','ITAL-1412','JAPN-1311','JAPN-1312','JAPN-1411','JAPN-1412','KORE-1311','KORE-1312','KORE-1411','KORE-1412','LATI-1311','LATI-1312','LATI-1411','LATI-1412','PORT-1311','PORT-1312','PORT-1411','PORT-1412','RUSS-1311','RUSS-1312','RUSS-1411','RUSS-1412','SGNL-1301','SGNL-1302','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311','VIET-1312','VIET-1411','VIET-1412'],
subcategory2:[
{course:"SPCH 1311",term:"Spring 2012",credit:"4.0",grade:"A"}
]},
{name2:"Quantitative Reasoning",completed2:"0",required2:"4",planned2:"0",children:['MATH-1314','MATH-1414','MATH-1316','MATH-1324','MATH-1325','MATH-1425','MATH-1332','MATH-1333','MATH-1348','MATH-1350','MATH-1351','MATH-2321','MATH-2421','MATH-2342','MATH-2442','MATH-2412','MATH-2413','MATH-2414','MATH-2415','MATH-2318','MATH-2418','MATH-2320','MATH-2420','MATH-2305'],
subcategory2:[
]},
{name2:"Wellness and The Human Experience",completed2:"0",required2:"3",planned2:"0",children:['ARTS-1311','ARTS-1312','ARTS-1313','ARTS-1316','ARTS-2313','ARTS-2316','ARTS-2326','ARTS-2333','ARTS-2336','ARTS-2341','ARTS-2346','ARTS-2348','ARTS-2356','ARTS-2366','BIOL-1322','BUSI-1307','COMM-1316','COMM-1318','DANC-1245','DANC-1341','DANC-1347','DANC-1351','DRAM-1322','DRAM-1330','DRAM-1351','MUEN-1122','MUEN-1131','MUEN-1132','MUEN-1133','MUEN-1134','MUEN-1135','MUEN-1136','MUEN-1137','MUEN-1151','MUEN-1152','MUEN-1153','MUEN-2123','MUEN-2141','MUSI-1116','MUSI-1181','MUSI-1183','MUSI-1192','MUSI-1263','MUSI-1301','PHED-1100','PHED-1101','PHED-1102','PHED-1104','PHED-1105','PHED-1106','PHED-1107','PHED-1108','PHED-1109','PHED-1110','PHED-1111','PHED-1112','PHED-1113','PHED-1114','PHED-1115','PHED-1116','PHED-1117','PHED-1118','PHED-1119','PHED-1120','PHED-1121','PHED-1122','PHED-1123','PHED-1124','PHED-1125','PHED-1126','PHED-1127','PHED-1128','PHED-1129','PHED-1164','PHED-1165','PHED-1251','PHED-1304','PHED-1306','PHED-1346','SOCI-2301','SOCI-2340','SPCH 2341'],
subcategory2:[
]}
]},
{name1:"TIER 2 - CORE DOMAINS", completed:"10", required:"26", subcategory1:[
{name2:"Qualitative Reasoning, Literacy and Research",completed2:"3",required2:"3",planned2:"0",children:['ENGL-1302'],
subcategory2:[
{course:"ENGL 1302",term:"Summer 2012",credit:"3.0",grade:"A"}
]},
{name2:"Self and Society",completed2:"3",required2:"9",planned2:"0",children:['HIST-1302','HIST-2301','HIST-2328','HIST-2381','GOVT-2305','ANTH-2302','ANTH-2346','ANTH-2351','COMM-1307','CRIJ-1301','CRIJ-1307','ECON-1301','ECON-1301','ECON-2302','ECON-2311','GEOG-1302','GEOG-1303','GEOG-2312','GOVT-2304','GOVT-2311','HIST-2321','HIST-2322','HIST-2327','PSYC-2301','PSYC-2306','PSYC-2314','PSYC-2316','SOCI-1301','SOCI-1306','SOCI-2306','SOCI-2319','SOCI-2336','TECA-1303','TECA-1354'],
subcategory2:[
{course:"GOVT 2301",term:"Spring 2012",credit:"3.0",grade:"B"},
{course:"PSYC 2301",term:"Summer 2012",credit:"--",grade:"--"}
]},
{name2:"Humanity, Creativity and the Aesthetic Experience",completed2:"0",required2:"6",planned2:"0",children:['ARTS-1301','ARTS-1303','ARTS-1304','DANC-2303','DRAM-1310','DRAM-2361','DRAM-2366','HUMA-1311','HUMA-1315','MUSI-1306','MUSI-1308','MUSI-1309','MUSI-1310',
'CUST-2370','ENGL-2321','ENGL-2322','ENGL-2323','ENGL-2326','ENGL-2327','ENGL-2328','ENGL-2331','ENGL-2332','ENGL-2333','ENGL-2342','ENGL-2343','ENGL-2351','HUMA-1302','HUMA-1305','HUMA-2319','PHIL-1301','PHIL-1304','PHIL-1316','PHIL-1317','PHIL-2303','PHIL-2306','PHIL-2307','PHIL-2316','PHIL-2317','PHIL-2318','PHIL-2321','ARAB-2311','ARAB-2312','CHIN-2311','CHIN-2312','CZEC-2311','CZEC-2312','FREN-2311','FREN-2312','GERM-2311','GERM-2312','GREE-2311','GREE-2312','ITAL-2311','ITAL-2312','JAPN-2311','JAPN-2312','KORE-2311','KORE-2312','LATI-2311','LATI-2312','PORT-2311','PORT-2312','RUSS-2311','RUSS-2312','SPAN-2311','PAN-2312','SPAN-2321','SPAN-2322','SPAN-2323','SPAN-2324','VIET-2311','VIET-2312'],
subcategory2:[
]},
{name2:"Scientific Discovery and Sustainability",completed2:"4",required2:"8",planned2:"0",children:['ANTH-2401','BIOL-1406','BIOL-1407','BIOL-1408','BIOL-1409','BIOL-1411','BIOL-2401','BIOL-2402','BIOL-2406','BIOL-2416','BIOL-2420','BIOL-2421','CHEM-1405','CHEM-1406','CHEM-1407','CHEM-1411','CHEM-1412','CHEM-2423','CHEM-2425','ENVR-1401','ENVR-1402','GEOL-1401','GEOL-1402','GEOL-1403','GEOL-1404','GEOL-1405','GEOL-1445','GEOL-1447','PHYS-1401','PHYS-1402','PHYS-1403','PHYS-1404','PHYS-1405','PHYS-1407','PHYS-1415','PHYS-1417','PHYS-2425','PHYS-2426'],
subcategory2:[
{course:"BIOL 1406",term:"Spring 2012",credit:"4.0",grade:"B"},
{course:"BIOL 1407",term:"Summer 2012",credit:"--",grade:"--"}
]}
]}
];
$scope.open = function (subcat) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
detail: function() {
return subcat;
}
}
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, detail) {
$scope.subcategory = detail;
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
</script>
</div>
</body>
</html>
As i just started using angular, i am not aware of all the concepts that are available. 因为我刚开始使用角度，我不知道所有可用的概念。
I would like to know how we can add data to the existing table mentioned in the controller to the subcategory2 with parameters such as {course:"BIOL-1406",term:"--",credit:"--",grade:"--"} (since we are selecting only the course from the modal, other headings can be filled as "--") which will be selected from the modal that will appear when the add courses button is clicked from selection. 我想知道我们如何使用{course：“BIOL-1406”，term：“ - ”，credit：“ - ”，grade：等参数将数据添加到控制器中提到的子类别2的现有表中。 “ - ”}（因为我们只从模态中选择课程，其他标题可以填写为“ - ”），这将从从选择中单击添加课程按钮时出现的模态中选择。 I tried using a push but i did it only for a static data like this and it works: 我尝试使用推送，但我只为这样的静态数据做了它，它的工作原理：
$scope.ok = function () {
$scope.subcategory.subcategory2.push({course:"BIOL 1406",term:"--",credit:"--",grade:"--"});
$modalInstance.close();
};
But i would like the table to display the parameter that is being slected from the modal.i didnt know how to pass the selected course information to the javascript and display it in the table. 但我希望该表显示从modal.i中选择的参数不知道如何将选定的课程信息传递给javascript并将其显示在表格中。
I posted this question earlier but unfortunately i didn't use the proper wordings in the question and so i deleted it to frame it better. 我之前发布过这个问题，但不幸的是我没有在问题中使用正确的措辞，所以我删除它以更好地构建它。
Please help 请帮忙
2 个解决方案
解决方案1
2 已采纳 2014-04-02 15:49:21
You can keep track of the checked courses using any number of techniques discussed in this related question: How do I bind to list of checkbox values with AngularJS? 您可以使用此相关问题中讨论的任意数量的技术跟踪已检查的课程： 如何使用AngularJS绑定到复选框值列表？
Here is a demo using one of the answers: http://plnkr.co/QzfZSpsdwTog6WgdUjAM 以下是使用其中一个答案的演示： http ： //plnkr.co/QzfZSpsdwTog6WgdUjAM
The idea is to keep an array of the selected courses, and then push them into the array of subcategory2 objects when OK is clicked. 我们的想法是保留所选课程的数组，然后在单击“确定”时将它们推送到subcategory2对象的数组中。
$scope.selectedCourses= [];
$scope.toggleCheck = function (course) {
if ($scope.selectedCourses.indexOf(course) === -1) {
$scope.selectedCourses.push(course);
} else {
$scope.selectedCourses.splice($scope.checkedFruits.indexOf(course), 1);
}
};
$scope.ok = function () {
for(var i = 0; i < $scope.selectedCourses.length; i++)
$scope.subcategory.subcategory2.push({course: $scope.selectedCourses[i], term:"---",credit:"---",grade:"---"});
//$scope.subcategory.subcategory2.push({course:"BIOL 1406",term:"---",credit:"---",grade:"---"});
$modalInstance.close();
};
Update 更新
At Abhishek Reddy's request, I updated the plunker to check the previously selected courses when the modal opens, and also remove courses that get unchecked. 在Abhishek Reddy的要求下，我更新了plunker以在模态打开时检查以前选择的课程，并删除未经检查的课程。
解决方案2
1 2014-04-02 15:38:16
The angular-bootstrap modal gives you a promise that is resolved upon closing or dismissing the modal - success on close, error on dismiss. angular-bootstrap模态为您提供了一个在关闭或解除模态时解决的承诺 - 关闭时成功，解雇时出错。 Take the modalInstance var and call .then on it's result property: 取modalInstance var并在其结果属性上调用.then：
$scope.open = function (subcat) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
detail: function() {
return subcat;
}
}
});
modalInstance.result.then(function(data) {
//data is $scope.selected.item contained in the $modalInstance.close() call in the ModalInstanceCtrl
});
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
AngularJS：如何将数据从bootstrap模式推送到表 - AngularJS: How to push data from bootstrap modal to table
如何在angularjs的模态窗口上显示发布数据 - How to display post data on modal window in angularjs
从模态AngularJS获取数据 - Getting data from modal AngularJS
从表angularjs获取highcharts数据 - get highcharts data from table angularjs
从json数组获取数据到Table angularJS - get data from json array to Table angularJS
jQuery-从表行获取数据并将其发布 - jQuery - Get data from table row and post it
AngularJS，从引导模态表中添加行 - AngularJS, add row in table from bootstrap modal
AngularJS表从模式选择和复选框中显示 - Angularjs table display from modal selection and checkbox
如何将json数据导入AngularJS模态对话框？ - How to get json data into AngularJS modal dialog?
从模态获取数据并将其显示在父控制器表中 - get data from modal and display it in a parent controller table
相关标签