javascript - Angularjs 从模态获取数据并在表中发布-6ren

javascript - Angularjs 从模态获取数据并在表中发布

转载作者：行者123 更新时间：2023-11-30 12:45:06

我有以下 angularjs html 应用程序:

<!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>

因为我刚开始使用 Angular，所以我不知道所有可用的概念。

我想知道我们如何使用 {course:"BIOL-1406",term:"--",credit:"--"等参数将数据添加到 Controller 中提到的现有表到 subcategory2 ,grade:"--"} (因为我们只从模式中选择类(class)，其他标题可以填写为“--”)，它将从从选择中单击添加类(class)按钮时出现的模式中选择.我尝试使用推送，但我只对这样的静态数据进行了推送并且它有效:

 $scope.ok = function () {
        $scope.subcategory.subcategory2.push({course:"BIOL 1406",term:"--",credit:"--",grade:"--"});
        $modalInstance.close();
    };

但我希望表格显示从模态中选择的参数。我不知道如何将所选类(class)信息传递给 javascript 并将其显示在表格中。

我之前发布了这个问题，但不幸的是我没有在问题中使用正确的措辞，所以我删除了它以更好地构建它。

请帮忙

最佳答案

您可以使用此相关问题中讨论的任意数量的技术来跟踪已检查的类(class):How do I bind to list of checkbox values with AngularJS?

这是使用其中一个答案的演示:http://plnkr.co/QzfZSpsdwTog6WgdUjAM

想法是保留所选类(class)的数组，然后在单击“确定”时将它们推送到 subcategory2 对象数组中。

$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();
};

更新
应 Abhishek Reddy 的要求，我更新了插件以在模式打开时检查之前选择的类(class)，并删除未选中的类(class)。

关于javascript - Angularjs 从模态获取数据并在表中发布，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22815956/

文章推荐： swift - 更改多个 CAShapeLayer 的绘制顺序

文章推荐： c# - 保持按钮位置与调整图像大小成比例

文章推荐： ios - 如何保存和重用整数

ios - 如何通过 VSTS 发布/发布 iOS 应用程序
我们正在使用 VSTS 构建和发布通过 Xamarin 创建的 iOS 和 Android 应用程序。通过 VSTS 将 Android 应用发布到商店相对简单。有人可以指导我或提供一些如何通过 VS
java - Spring Social Facebook - 发布/发布 API 详细信息
我一直在研究 Spring Social Facebook 的 publish(objectId, connectionName, data) API ，但不确定此 API 的用法(遗憾的是，由于缺少
python - Django View 流 - 创建->待处理->发布->编辑->待处理->发布
我正在使用 django viewflow 创建一个发布流程: 用户创建对象它进入审核流程，其状态为待处理(公众不可见) 经过审核和批准后，就会发布并公开可见。如果用户编辑同一实体，则会再次进入审
android - 带 Volley 的 HTTP 发布 --- XML 发布，JSON 响应
我正在尝试进行 API 调用，并且 API 需要格式为 XML: Security GetSessionInfo 999999999999 0 2 {
c# - WebApi 2 Http 发布 405 "The requested resource does not support http method ' 发布'"
我已经查看了所有 StackOverflow，但没有找到适合我的案例的解决方案我有 405 HttpStatusCode 调用 API/Regions/Create 操作这是我的 baseContro
java - 1.3.7.发布 -> 1.4.1.发布 | java.lang.NoSuchMethodError : org. springframework.boot.builder.SpringApplicationBuilder.showBanner 错误
如果我切换到新版本的SpringBoot，我在启动应用程序时会得到上面的错误信息。这是为什么？最美好的祝愿史蒂文 pom.xml 4.0.0 de.xyz.microservice spring
javascript窗口重定向安全地传递参数(发布)
我有一个场景，页面导航是从一个域到另一个域完成的。例如，导航是从 http://www.foo.com到 http://www.bar.com在 JavaScript 中单击按钮重定向时，我需要将用
发布：iNeuOS工业互联网操作系统V5Preview1版本（自主可控）
这半年来一直深耕包头，这个城市比较不错，但是推进项目的难度确实挺大的。与开发产品相比，后者更省心。但是光研发产品，没有项目
Github 发布 - 如何部署发布
我正在阅读有关 Github 版本的信息，它似乎很适合您的项目。因为我们需要决定将哪些功能用于生产，哪些不用于。我无法理解的部分是，master 和 release 分支如何在其中发挥作用。 Sh
Github 发布/标签未在本地显示？
我将一些代码推送到远程存储库，然后在 GitHub 上创建了第一个版本，并将其命名为 'v0.0.1'。 GitHub 现在显示我现在有一个版本，并且还在“标签”中显示我有一个标签 “v0.0.1”。
GitHub 发布、多个文件和版本控制
如果我有一个具有以下文件/文件夹结构的 GitHub 存储库 github.com/@product/template: /build /fileA /fileB /src /genera
Maven 发布 :branch
我有一个 Maven 多模块项目。当代码开发完成后，我们想在 Jenkins 中编写一个分支构建作业，它分支代码，增加主干中的 pom 版本，并删除 -SNAPSHOT 来自分支中的 pom 版本。
meteor - 发布/订阅大数据集合
我有一个非常大的集合(约 40000 个文档，包含约 20-25 个字段，包括包含一组约 500 个项目的数组字段)和约 2000 个订阅者(他们现在只是机器人)。因此，当用户订阅整个集合(不包括服
architecture - 发布/订阅消息中的本地队列与远程队列
如果我正在使用消息队列构建一个包含数十个发布者/订阅者的系统，那么我似乎有一些网络配置选项: 我可以拥有一个所有机器都使用的集群代理 - 每台机器都没有本地队列我可以在每台机器上本地安装代理，并使用
Flash 开发 - 发布
我正在使用 Flash Develop，并且创建了一个 ActionScript 3.0 项目。它启动并读取一个 xml 文件，其中包含图像的 url。我已将 url 保留在与 swf 相同的文件夹中
cocoa - NSarray 发布
如果我在一个句子中使用 alloc 和 retain 声明一个 NSArray 那么我应该释放 NSArray 对象两次(即[arrayObject release] 2次)？最佳答案如果您在同一
javascript - 发布/订阅
我正在尝试在 Node 中实现发布/订阅模式，但不使用 Redis。功能应该是相同的；您可以发布到 channel ，订阅 channel 并收听数据(如果您已订阅)；以下是 Redis 功能: pu
collections - 发布/订阅同一服务器集合的多个子集
编辑:这个问题、一些答案和一些评论，包含很多错误信息。见 how Meteor collections, publications and subscriptions work准确理解发布和订阅同一服
debugging - 发布/调试版本之间存在巨大的帧速率差异
我正在开发一款 DirectX 游戏，我发现在发布版本中我的平均帧速率为 170fps，但是在调试版本中我的帧速率约为 20fps。我想知道发布和调试版本之间的巨大差异是否正常，特别是因为在调试中我
azure - 回滚部署/发布？
是否有办法回滚 Windows Azure 网站和 SQL 部署/发布？我发布了一个网站，现在它导致了很多错误，我想回到之前的状态并进一步处理代码。这可能吗？最佳答案如果您使用 Git 或 T

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angularjs 从模态获取数据并在表中发布