Angular js bootstrap modal error

Question

I have the following angular js 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 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="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}}
                                    <a class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal" >Add Course <span class="glyphicon glyphicon-plus"></span></a>
                                    <button ng-bind="subcategory.name2" ng-click="open($index)"></button>

                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                      <div class="modal-dialog">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                                            <h4 class="modal-title" id="myModalLabel">{{subcategory.name2}}</h4>
                                          </div>
                                          <div class="modal-body" align="center">
                                            <font size="2" align="center">Required Credits : <span class="badge badge-machb">{{subcategory.required2}} </span>
                                            Completed Credits : <span class="badge badge-machb">{{subcategory.completed2}} </span>
                                            Planned Credits : <span class="badge badge-machb">{{subcategory.planned2}} </span></font>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>


                                </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:[

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

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



    </script>



    <br/>


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

When i click the buttons that say, critical reading and writing, Speaking etc, i wanted to display the children of the json file that is mentioned in the controller. But there is some error in my code and is not letting me display the children.

Please help

I am sorry about the wordings i used. There is no error in the console. The modal appears when i click the button, But it does not display any elements — Abhishek
– Abhishek, Commented Mar 31, 2014 at 0:43

StuR · Accepted Answer · 2014-03-31 01:12:16Z

1

You call open($index), which could be 0,1,2,3, for your subcategories and in your resolve method you have:

return $scope.details[$index];

But $scope.details only has one item!

Your ng-repeat is looping detail.subcategory1, so this is corresponding array that your $index represents, and what you must pass to your directive.

It will work if you put this in your resolve method:

return $scope.details[0].subcategory1[$index];

and in your ModalInstanceCtrl:

$scope.subcategory = detail;

Working example: http://jsfiddle.net/rd13/kScvV/

If you have for example multiple items in your details array, I'd consider passing in both the index of the details array, and the index of the subcategory. Alternatively, pass the subcategory object in your open function.

answered Mar 31, 2014 at 1:12

StuR

12.3k9 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pauloadaoag · Accepted Answer · 2014-03-31 01:12:40Z

The problem is that your model is out of sync with your modal template - thats why no results are showing up.

For example, in you modal template you bind to the following property

subcategory.name2

But if you look at the object that you are passing to the modal, these are its properties

{
      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"
        }]
      }

There is no "name2" property. I suggest revisiting how your code is setup.

Collectives™ on Stack Overflow

Angular js bootstrap modal error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related