1

I have the following angularjs html app:

<!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. 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.

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

Abhishek
  • 2,998
  • 9
  • 42
  • 93
  • Are you asking how to get the value `$scope.selected.item` from the ModalInstanceCtrl passed back to the controller that opened the modal? – brianj Apr 02 '14 at 15:25
  • Yes i wanted to display the selected value in the table when we click on the save button in the modal. :) – Abhishek Apr 02 '14 at 15:29

2 Answers2

2

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?

Here is a demo using one of the answers: 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.

$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.

Community
  • 1
  • 1
j.wittwer
  • 9,497
  • 3
  • 30
  • 32
  • Hi i have one more question if you wont mind answering it. Can we keep the courses we checked to remain as checked in the modal so that when we uncheck it, it should remove the course from the table? – Abhishek Apr 02 '14 at 16:16
  • Do you want to prevent already selected courses from appearing in the modal? – j.wittwer Apr 02 '14 at 16:32
  • No but i want it to appear with a checked mark so that when we uncheck them, the table should not show that course anymore. – Abhishek Apr 02 '14 at 18:10
  • Its just a matter of adding more complicated JavaScript to your modal controller. I can play with it later. You can probably get a faster answer by posting a new question specifically about initializing the check marks in the modal, and then removing items from `subcategory2` on uncheck. – j.wittwer Apr 02 '14 at 18:23
  • okay @AbhishekReddy, I got bored and added the feature you requested. No pretty algorithm, just brute force javascript. But it works. And, I removed a duplicate course that was breaking `ng-repeat`. – j.wittwer Apr 03 '14 at 03:25
  • Thank you @j.wittwer.. Just one small issue in the code. The code works great and does the insertions and deletions correctly. But after inserting like 3 random courses, when we click on the add course button again, it shows check marks on the first 3 courses instead of the actual checked courses. – Abhishek Apr 03 '14 at 06:40
  • oops, @AbhishekReddy i didn't notice that. i replaced my code with http://stackoverflow.com/a/22821017/1245971 from http://stackoverflow.com/questions/22820516/angularjs-table-display-from-modal-selection-and-checkbox, and it seems to work as expected. – j.wittwer Apr 03 '14 at 11:18
  • hey man!! some help here? i tried my best to explain the question here ;) http://stackoverflow.com/questions/24000362/angularjs-modal-acting-weird-with-checkboxes?noredirect=1#comment36988972_24000362 – Abhishek Jun 02 '14 at 18:45
1

The angular-bootstrap modal gives you a promise that is resolved upon closing or dismissing the modal - success on close, error on dismiss. Take the modalInstance var and call .then on it's result property:

$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

    });
};
brianj
  • 316
  • 2
  • 7