从模式选择和复选框Angularjs表显示 [英] Angularjs table display from modal selection and checkbox
本文介绍了从模式选择和复选框Angularjs表显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下angularjs HTML应用程序：
I have the following angularjs html app:
下面是 plunker
<!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" ng-checked="selectedCourses.indexOf(child) != -1" ng-click="toggleCheck(child)" 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.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();
};
$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.
当我preSS的添加课程按钮，模态弹出并显示可用课程列表。我们可以选择一个课程，并将其插入，将只要我们点击保存按钮显示的子类别表。但我想知道如何让查马克留作出选择后，.IE。如果我想添加其他课程到同一个表，我想模态与复选标记显示为检查那些已经在子类表中的课程。另外，如果我从模态取消复选标记，我想表不显示该课程了。这是做到这一点的最好方法是什么？
When i press the Add Course button, the modal pops up and shows a list of the available courses. We can select a course and insert it into the subcategory table which will be displayed as soon as we click the save button. But i would like to know how to make the check mark stay after making the selection, .ie. If i wanted to add another course into the same table, i want the modal to show with check marks as checked for the courses that are already in the subcategory table. Also if i uncheck the check mark from the modal, i want the table to not show that course anymore. Which is the best way to do this?
请帮忙
推荐答案
您需要重新填充selectedCourses：
You need to repopulate the selectedCourses:
var ModalInstanceCtrl = function ($scope, $modalInstance, detail) {
$scope.selectedCourses= [];
angular.forEach(detail.subcategory2, function(item) {
$scope.selectedCourses.push(item.course);
});
//the rest of your code
})
然后，删除它，你只需要你推的项目到它之前清除出数组：
And then, to remove it, you just need to clear out the array before you push the items onto it:
$scope.ok = function () {
$scope.subcategory.subcategory2 = [];
for(var i = 0; i < $scope.selectedCourses.length; i++)
$scope.subcategory.subcategory2.push({course: $scope.selectedCourses[i], term:"---",credit:"---",grade:"---"});
$modalInstance.close();
};
这篇关于从模式选择和复选框Angularjs表显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
