模态角度重复

时间：2015-06-17 08:41:14

标签： angularjs ng-repeat

我尝试做一个在表格中显示事件的模态，但是当我执行ng-repeat时只显示一个项目而我不知道为什么。

如果有人可以帮助我，我将非常感激， html如下：

JsonDeserializer

控制器如下。模态位于具有父子的表中。

<!DOCTYPE html>
<html lang="en" ng-app="dashboard">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>LiftEye</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="../controllers/dashboardController.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../js/angular-tablescroll.js"></script>

    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-resource.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">


    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

</head>

<body ng-controller="dashboardController">

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">

    <div id="page-wrapper" >
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Operación</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row" >
            <div class="col-lg-8 col-md-8">
                <div class="panel " STYLE="background-color: #eaeaea">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                            </div>
                            <div class="col-xs-9 text-right">


                            </div>
                        </div>


                    </div>

                </div>
            </div>

        <!-- /.row -->

        <!-- /.panel -->
        <div class="panel panel-default" >
            <div class="panel-heading">

            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div >
                            <table class="table table-bordered table-hover table-striped dataTable no-footer" data-sort-name="name" data-sort-order="desc">
                                <tr role = "row" class="info text-center">
                                    <th ng-click="order('msisdn')">Número Teléfono</th>
                                    <th ng-click="order('icc')">ICC</th>
                                    <th ng-click="order('imei')">IMEI</th>
                                    <!--th>IMEI</th-->
                                    <th ng-click="order('ActivationStatus')">Estado</th>
                                    <th ng-click="order('sitename')">Instalación</th>
                                    <th ng-click="order('siteaddress')">Dirección</th>
                                    <th ng-click="order('sitecity')">Ciudad</th>
                                    <th ng-click="order('sitezip')">Código Postal</th>

                                    <th ng-click="order('phonedesc')">Modelo Teléfono</th>
                                    <th ng-click="order('ContractingMode')">VBP</th>


                                </tr>


                                <tr class=" text-center" ng-repeat-start="object in objects | filter:searchText | filter:tableFilter | orderBy:predicate:reverse" ng-click="main.activeRow = object.icc" >
                                    <td>{{object.msisdn}}</td>
                                    <td>{{object.icc}}</td>
                                    <td>{{object.imei}}</td>
                                    <td>{{object.ActivationStatus}}</td>
                                    <td>{{object.sitename}}</td>
                                    <td>{{object.siteaddress}}</td>
                                    <td>{{object.sitecity}}</td>
                                    <td>{{object.sitezip}}</td>

                                    <td>{{object.phonedesc}}</td>
                                    <td>{{ object.ContractingMode ? 'Yes': 'No'}}</td>





                                </tr>

                                <tr ng-repeat-end ng-show="main.activeRow==object.icc">
                                    <td colspan="3"> <a>Fecha Activación:</a> <div> {{object.DateActivation}}</div> <div><a> Fecha Baja</a> {{object.DateDisconnection}}</div> <div><a> Último Evento HW</a> {{object.LastHWEvent}}</div></td>
                                    <td colspan="4"> <a>Último Evento Humano:</a> <div> {{object.LastHumanEvent}}</div> <div><a> Último Evento Test</a> {{object.LastTestEvent}}</div> <a>Comentarios:</a> <div> {{object.comments}}</div> </td>
                                    <td colspan="2"> <div><a> Rae1: </a> {{object.rae1}}</div>  <div><a> Rae2: </a> {{object.rae2}}</div> <a>Pin1:</a> <div> {{object.pin1}}</div> <div><a> Pin2: </a> {{object.pin2}}</div></td>

                                    <td colspan="1"> <div> <button class="btn btn-info" ng-click="open(object)">Eventos</button></div>  </td>
                                    <div >
                                        <script type="text/ng-template" id="myModalContent.html">
                                            <div class="modal-header">
                                                <h3 class="modal-title">Eventos</h3>
                                            </div>
                                            <div class="modal-body"  >
                                                <table class="table" ng-tablescroll="options">
                                                    <thead>
                                                    <tr>
                                                        <th >Fecha</th>
                                                        <th >Tipo Evento</th>
                                                        <th >Origen Evento</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="evento in eventos | limitTo:5">

                                                        <td>{{evento.eventtime}}</td>
                                                        <td>{{evento.eventtype}}</td>
                                                        <td>{{evento.parenttype}}</td>


                                                    </tr></tbody></table>


                                            </div>


                                            <div class="modal-footer">

                                                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                                            </div>
                                        </script>


                                    </div>
                                </tr>




                            </table>
                        </div>
                        <!-- /.table-responsive -->




                    </div>

                </div>






            </div>
            <!-- /.panel-body -->
        </div>

        <!-- /.panel -->

        <!-- /.col-lg-4 -->
    </div>
    <!-- /.row -->
</div>


</body>

</html>

enter image description here

2 个答案:

答案 0 :(得分：2)

您提供了大量代码 - 您的所有列表和表格是否存在相同的问题？

我的第一个猜测是数组的初始化：

$scope.grupos =[{}];

尝试设置一个空数组而不是第一个元素为空的数组：

$scope.grupos = [];

由于您在接收数据时将新元素推送到数组中，因此第一个空白项目将始终停留在数据中，并可能导致您的问题。

另一个问题是获取“eventos”：$scope.eventos = event;

我认为这应该是推动：$scope.eventos.push(event);

没有冒犯 - 也许你应该尝试更好地理解Javascript中的这些基本概念（你已经正确地使用了大部分这些概念，但有些看起来很混乱）：

  • 对象初始化：var obj = {}; - 这将是一个没有属性的空对象。
  • 数组初始化：var arr = []; - 这是一个没有元素的空数组。

因此var x = [{}]会导致x成为一个空对象的数组。

答案 1 :(得分：2)

你试图为每个事件打开一个模态，而不是为所有事件打开一个模态。

尝试更换：

var events = data;

angular.forEach(events, function(event) {
    $scope.eventos = event;
    var modalInstance = $modal.open({
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
       size: 'lg',
       resolve: {
           items: function () {
               return $scope.eventos;
           }
       }
   });
})

与

$scope.eventos = data;
var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    size: 'lg',
    resolve: {
       items: function () {
           return $scope.eventos;
       }
   }
});

并将您的模态实例替换为：

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, $anchorScroll){
    $anchorScroll();
    $scope.eventos = items;

    $scope.cancel = function () {
       $modalInstance.dismiss('cancel');
    };
 });
相关问题
最新问题