2014-03-31 100 views
0

我有一個angularjs應用程序的HTML頁面如下:角JS引導模式問題

<!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="[email protected]*" 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> 

當我點擊位於比第一面板以外的面板上的添加課程按鈕,我仍然得到從選項第一個小組.ie。出於某種原因,控制器在第二個面板中再次從第一個面板獲取按鈕元素。我在哪裏錯過了邏輯?

請幫忙!

+0

能爲您提供myModalContent.html代碼。我已經創建了plunker供您參考@ http://plnkr.co/edit/wrTb0MFAyHMQHy9Htn5C?p=preview在此處提供代碼或更新plnkr。 –

+0

它在頁面的頭:) – Abhishek

回答

2

您需要通過subcategory對象,而不是$index,以開放的功能:

<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)"> 

然後,模式將獲得的subcategory正確的內容。

這裏是一個演示:http://plnkr.co/zptikCEWLM7NuxH4QODs