个人中心
gpt4 book ai didi

javascript - Angular JS Datatables 行单击事件添加动态 AngularUI 选项卡

转载 作者：行者123 更新时间：2023-11-27 23:01:10 25 4
gpt4 key购买 nike

我想做一个像选项卡一样的浏览器，但事件将在 Angular 数据表内触发(我使用这个 - angular-datatables )。我已经将 Controller 设置为监听每行的点击以添加动态选项卡。但遗憾的是，它没有添加选项卡。我记录了$scope.tabs数组并发现选项卡已添加但不在 <uib-tabset> 上。请引用下面的截图；

sample

上面的屏幕截图显示了数据表，当我单击突出显示的框(红色)时，它应该在“动态标题 1”选项卡之后添加一个选项卡并将其设置为事件(或当前选定的选项卡)。每次单击一行都会添加一个动态选项卡，我该如何做到这一点？

这是我的 angularJS Controller

controller.js

app.controller('mainCtrl',['$scope',
                           'API_URL',
                           'DTOptionsBuilder',
                           'DTColumnBuilder',
                           '$resource',
    function($scope, API_URL, DTOptionsBuilder, DTColumnBuilder, $resource){
        $scope.tabs = [
            { title:'Dynamic Title 1', content:'Dynamic content 1' },
        ];

        $scope.model = {

        };

        var vm = $scope;
        vm.dtOptions = DTOptionsBuilder.fromSource(API_URL+'employee')
            .withPaginationType('full_numbers').withBootstrap()
            .withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                $('td', nRow).unbind('click');
                $('td', nRow).bind('click', function() {
                    $scope.tabs.push({
                        title: aData.empid,
                        content: 'Testing Content'
                    });
                });
            });

        vm.dtColumns = [
            DTColumnBuilder.newColumn('empid').withTitle('ID'),
            DTColumnBuilder.newColumn('fname').withTitle('First name'),
            DTColumnBuilder.newColumn('lname').withTitle('Last name'),
            DTColumnBuilder.newColumn('position').withTitle('Position'),
            DTColumnBuilder.newColumn('email').withTitle('Email'),
        ];
}]);

这是我的 html

home.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Test</title>

        <!-- Bootstrap -->
        <link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet">

        <!-- Angular DataTables -->
        <link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet">
        <link href="[[ asset('/css/angular/datatables.bootstrap.min.css') ]]" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body ng-app="medrec">
        <div class="container-fluid">
            <div class="row">
                <!-- header -->
            </div>
            <br/><br/><br/><br/><br/>
            <div class="row">
                <div class="col-md-12">
                    <div ng-controller="mainCtrl">
                        <uib-tabset active="active">
                            <uib-tab index="0" heading="Static title">
                                <table datatable="" dt-options="dtOptions" 
                                       dt-columns="dtColumns" class="table table-hover" 
                                       width="100%">
                                </table>
                            </uib-tab>
                            <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                                {{tab.content}}
                            </uib-tab>
                        </uib-tabset>
                    </div>
                </div>
            </div>
        </div>

        @include('templates.footer')
        <!-- jQuery  -->
        <script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script>

        <!-- jQuery DataTables -->
        <script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script>

        <!-- AngularJS Library -->
        <script src="[[ asset('/app/lib/angular.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-datatables.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-animate.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-route.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-touch.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-resource.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-sanitize.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular.ui-bootstrap.min.js') ]]"></script>


        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="[[ asset('/js/bootstrap.min.js') ]]"></script>
        <script src="[[ asset('/js/angular-datatables.bootstrap.min.js') ]]"></script>

        <!-- AngularJS Modules -->
        <script src="[[ asset('/app/app.js') ]]"></script>

        <!-- AngularJS Config -->
        <!-- script src="[[ asset('/app/config/route.js') ]]"></script -->

        <!-- AngularJS Directives -->
        <!-- script src="[[ asset('/app/controller/directive.js') ]]"></script -->

        <!-- AngularJS Controllers -->
        <script src="[[ asset('/app/controller/main-controller.js') ]]"></script>

    </body>
</html>

最佳答案

您正在更新$scope jQuery 回调中的变量。我相信你可以强制更新<uib-tab>通过使用$apply :

$scope.tabs.push({
  title: aData.empid,
  content: 'Testing Content'
});
$scope.$apply();

关于javascript - Angular JS Datatables 行单击事件添加动态 AngularUI 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37086203/

25 4 0
文章推荐： css - 为什么我在网格行中有额外的空间？
文章推荐： html - 将鼠标悬停在 li 上时，如何仅在左侧显示图像幻灯片
文章推荐： c++ - 从基方法获取派生类
文章推荐： javascript - 实现重复事件时如何在全日历中设置stick=true？
行者123
个人简介

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

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