个人中心
gpt4 book ai didi

javascript - Angular js Bootstrap 模式错误

转载 作者：行者123 更新时间：2023-11-30 17:32:17 24 4
gpt4 key购买 nike

我有以下 Angular 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="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>

当我单击说、批判性阅读和写作、口语等按钮时，我想显示 Controller 中提到的 json 文件的子项。但是我的代码中有一些错误，不允许我显示 child 。

请帮忙

最佳答案

您为您的子类别调用 open($index)，它可以是 0、1、2、3，并且在您的 resolve 方法中:

return $scope.details[$index];

但是 $scope.details 只有一项!

你的 ng-repeat 正在循环 detail.subcategory1，所以这是你的 $index 代表的对应数组，以及你必须传递给你的指令的内容。

如果你把它放在你的 resolve 方法中，它将起作用:

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

并在您的 ModalInstanceCtrl 中:

$scope.subcategory = detail;

工作示例:http://jsfiddle.net/rd13/kScvV/

例如，如果您的详细信息数组中有多个项目，我会考虑同时传入详细信息数组的索引和子类别的索引。或者，在您的打开函数中传递子类别对象。

关于javascript - Angular js Bootstrap 模式错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22751749/

24 4 0
文章推荐： javascript - 使用循环为函数设置多个超时
文章推荐： javascript - 如何正确地将 Javascript 链接到 html 页面
文章推荐： javascript - 如何允许不同的更新 - Meteor collection.allow
文章推荐： javascript - 表格排序器不适用于 json
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com