CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3066

Angular js bootstrap modal issue

I have an angularjs app html page as follows:

<!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 data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
        <link type="text/css" rel="stylesheet" href="css/badge.css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <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">
            <h1 ng-bind="subcategory.name2"></h1>
                <ul>
                  <li ng-repeat="child in subcategory.children" ng-bind="child"></li>
                </ul>
        </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-click="open($index)">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:"6",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                          'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                          'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], 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:"4",required2:"4",planned2:"4",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                          'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                          'LATI-1412','PORT-1412'], subcategory2:[
                        {course:"SPCH 1311",term:"Spring 2012",credit:"4.0",grade:"A"}
                    ]},
                    {name2:"Quantitative Reasoning",completed2:"0",required2:"4",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[

                    ]},
                    {name2:"Wellness and The Human Experience",completed2:"0",required2:"3",planned2:"0",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[

                    ]}

                ]},
                {name1:"TIER 2 - CORE DOMAINS", completed:"10", required:"26", subcategory1:[
                    {name2:"Qualitative Reasoning, Literacy and Research",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'],  subcategory2:[
                        {course:"ENGL 1302",term:"Summer 2012",credit:"3.0",grade:"A"}
                    ]},
                    {name2:"Self and Society",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
                        {course:"GOVT 2301",term:"Spring 2012",credit:"3.0",grade:"B"},
                        {course:"PSYC 2301",term:"Summer 2012",credit:"--",grade:"--"}
                    ]},
                    {name2:"Qualitative Reasoning, Literacy and Research",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[

                    ]},
                    {name2:"Qualitative Reasoning, Literacy and Research",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                          'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
                        {course:"BIOL 1406",term:"Spring 2012",credit:"4.0",grade:"B"},
                        {course:"BIOL 1407",term:"Summer 2012",credit:"--",grade:"--"}
                    ]}
                ]},
                {name1:"TIER 3 - INTEGRATIVE LEARNING", completed:"0", required:"3",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory1:[
                    {name2:"", subcategory2:[

                    ]}
                ]},
                {name1:"AS. SCIENCE GENERAL ELECTIVES", completed:"13", required:"18", subcategory1:[
                    {name2:"",children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'FREN-1311','JAPN-1412','KORE-1412','LATI-1412','PORT-1412',
                          'RUSS-1412','SGNL-1301','SGNL-1302',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412'], subcategory2:[
                        {course:"ECON 2302",term:"Spring 2012",credit:"3.0",grade:"A"},
                        {course:"COSC 1300",term:"Summer 2012",credit:"3.0",grade:"B"},
                        {course:"HDEV 1300",term:"Summer 2012",credit:"3.0",grade:"A"},
                        {course:"CHEM 1405",term:"Summer 2012",credit:"4.0",grade:"C"},
                        {course:"BIOL 2401",term:"Summer 2012",credit:"--",grade:"--"}
                    ]}
                ]}

            ];
            $scope.open = function ($index) {
                var modalInstance = $modal.open({
                    templateUrl: 'myModalContent.html',
                    controller: ModalInstanceCtrl,
                    resolve: {
                        detail: function() {
                            return $scope.details[0].subcategory1[$index];
                        }
                    }   
                });
            };
        });

        var ModalInstanceCtrl = function ($scope, $modalInstance, detail) {
          $scope.subcategory = detail;
        };



    </script>



    <br/>


    </div>
    </body>
</html>

When i click on the add course button located on the panels other than the first panel, I am still getting the options from the first panel .ie. for some reason the controller is fetching the elements of the buttons from the first panel again in the second panel. Where am i missing the logic?

Please help!

Upvotes: 0

Views: 131

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

You need to pass the subcategory object, not the $index, to the open function:

<div ng-repeat="subcategory in detail.subcategory1" class="panel-body">
    <h4>
    <strong>{{subcategory.name2}}
    <button class="btn btn-default pull-right" ng-click="open(subcategory)">

Then, the modal will get the correct content for the subcategory.

Here is a demo: http://plnkr.co/zptikCEWLM7NuxH4QODs

Upvotes: 2

Related Questions