javascript - Angular bootstrap modal toggle checked for data already present -
firstly apologize lengthy question cant post plunker because has services brings data backend. hence posted data can samples.
i have angular js app uses bootstrap. have modal defined has following table:
<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>title</th> <th>credits</th> </tr> <tr ng-repeat="child in requirements"> {% verbatim %} <td class="vcenter"> <input type="checkbox" ng-checked="" ng-click="togglecheck(child)" ng-disabled="required == (planned + completed) && (selectedcourses.indexof(child) == -1)" value=""/> {{child.course.subject}}-{{child.course.course_no}} </td> <td class="vcenter">{{child.course.course_name}}</td> {% endverbatim %} <td class="vcenter">3</td> </tr> </table> </div> this how defined javascript:
var modalinstancectrl = function (mpttservice, plannedservice, requirementsservice, $scope, $http, $log, $modalinstance, mpttid, mpttrequired, mpttcompleted, mpttplanned) { //debugger $scope.subcategory = mpttid; $scope.selectedcourses= []; $scope.completed = mpttcompleted; $scope.required = mpttrequired; $scope.planned = mpttplanned; mpttservice.getmptt(function(data){ $scope.mpttdetails = data; console.log(data); }); plannedservice.getplanned(function(data){ $scope.planneddetails = data; console.log(data); }); requirementsservice.getrequirements($scope.subcategory,function(data){ $scope.requirements = data; console.log(data); }); angular.foreach(mpttid.subcategory, function(item) { $scope.selectedcourses.push(item.requirements); }); $scope.getpercentage = function () { return (($scope.planned+$scope.completed)/($scope.required)*100).tofixed(2); } $scope.togglecheck = function (course) { if (($scope.selectedcourses.indexof(course) === -1)) { $scope.selectedcourses.push(course); $scope.planned += 3; } else { $scope.selectedcourses.splice($scope.selectedcourses.indexof(course), 1); $scope.planned -= 3; } $scope.getpercentage(); }; $scope.checkedfunction = function(course){ } $scope.ok = function () { //$scope.subcategory.subcategory2 = []; for(var = 0; < $scope.selectedcourses.length; i++){ //$scope.subcategory.subcategory2.push({course: $scope.selectedcourses[i], term:"--",credit:"--",grade:"--"}); var variablestosend = { "student": 2773951, "category": $scope.subcategory, "course_name": ($scope.selectedcourses[i].course.subject).concat("-",$scope.selectedcourses[i].course.course_no), "title": $scope.selectedcourses[i].course.title, "credit": 3, "term": 'none', } $http.post('/api/studentplannedcredit/', variablestosend).then(function(response){ console.log(response); //alert('post added'); document.location.reload(true); }, function(response){ console.log(response); alert('unable add course'); }); } $modalinstance.close(); }; $scope.cancel = function () { $modalinstance.dismiss('cancel'); }; }; in app, when modal opens, user can check courses wants , save them using save() function. since there limitations on number of courses taken, table disable automatically when required number of courses have been checked.
this how json looks like:
planneddetails:
[ { "student": 2773951, "category": 163, "course_name": "hist-1301", "title": "history of united states i", "credit": 3, "term": "2014fa" }, { "student": 2773951, "category": 169, "course_name": "anth-2401", "title": "physical anthropology", "credit": 3, "term": "2014su" }, { "student": 2773951, "category": 169, "course_name": "envr-1402", "title": "environmental science ii", "credit": 3, "term": "2015su" }, { "student": 2773951, "category": 157, "course_name": "hist-1302", "title": "history of united states ii", "credit": 3, "term": "none" } ] mpttdetails:
{ "student_program": { "academic_program": { "id": 596, "program_title": "associate in sciences degree", "required_credits": 60 }, "id": 3685, "student": 2773951, "credits_completed": 26, "academic_program_gpa": null, "primary_program": true }, "category": { "id": 163, "name": "critical reading , writing", "min_credit": 6, "parent": { "id": 162, "name": "tier 1 - core foundations", "min_credit": 13, "parent": { "id": 149, "academic_program": null, "name": "as.science", "min_credit": 60, "max_credit": null, "parent": 128, "lft": 30, "rght": 71, "tree_id": 2, "level": 1 }, "level": 2 }, "level": 3 }, "student_academic_credit": { "accad_credit_id": 29328778, "course": 81, "student": 2773951, "course_name": "engl-1301", "title": "composition i", "credit": 3, "final_grade": "c", "term": "2012fa" } }, { "student_program": { "academic_program": { "id": 596, "program_title": "associate in sciences degree", "required_credits": 60 }, "id": 3685, "student": 2773951, "credits_completed": 26, "academic_program_gpa": null, "primary_program": true }, "category": { "id": 154, "name": "cb050", "min_credit": 3, "parent": { "id": 152, "name": "humanity, creativity , aesthetic experience", "min_credit": 6, "parent": { "id": 150, "academic_program": null, "name": "tier 2 - core domains", "min_credit": 26, "max_credit": null, "parent": 149, "lft": 41, "rght": 60, "tree_id": 2, "level": 2 }, "level": 3 }, "level": 4 }, "student_academic_credit": { "accad_credit_id": 29328777, "course": 209, "student": 2773951, "course_name": "arts-1301", "title": "art apprec", "credit": 3, "final_grade": "a", "term": "2012fa" } }, and requirements json:
[ { "category": 163, "course": { "course_id": 1023, "subject": "hist", "course_no": "1301", "course_name": "history of united states i", "title": "history of united states i", "local_govt_code": "5401025125", "academic_level": "cr", "grade_scheme": "cr", "credit_type": "i", "course_type": "1", "course_level": "1", "min_credit": 3, "max_credit": null, "prereqs": 7, "cip": "54.0102", "ceus": "", "transfer_status": "060" } }, { "category": 163, "course": { "course_id": 81, "subject": "engl", "course_no": "1301", "course_name": "composition i", "title": "composition i", "local_govt_code": "2313015112", "academic_level": "cr", "grade_scheme": "cr", "credit_type": "i", "course_type": "1", "course_level": "1", "min_credit": 3, "max_credit": null, "prereqs": 5, "cip": "23.0401", "ceus": "", "transfer_status": "010" } } ] the next step check courses in table have been taken. these details retrieved mpttdetails , planneddetails.
so how make modal open table having courses checked present in mpttdetails , planned details?
note: courses in $scope.requirements.course.{{subject}}-{{course_no}} needs compared mpttdetails.student_academic_credit.course_name , planneddetails.course_name . unable figure out how achieve this. please help!
Comments
Post a Comment