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

2
  • 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 2, 2014 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 2, 2014 at 15:29

2 Answers 2

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.

8
  • 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 2, 2014 at 16:16
  • Do you want to prevent already selected courses from appearing in the modal?
    – j.wittwer
    Apr 2, 2014 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 2, 2014 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 2, 2014 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 3, 2014 at 3:25
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

    });
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.