1
Я пытаюсь сделать модальный, который показывает события в таблице, но когда я делаю ng-repeat, покажу только один элемент, и я не знаю почему.Modal Angular ng repeat
Если кто-то может мне помочь я буду очень благодарен, HTML, заключается в следующем:
<!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>
И контроллер состоит в следующем. Модаль находится внутри таблицы с родительским дочерним элементом.
var app =angular.module('dashboard',['ui.bootstrap']);
app.controller('dashboardController', function($scope, $http,$modal){
$scope.objects=[{}];
$scope.objects={};
$scope.objects=[];
$scope.grupos =[{}];
$scope.longitud =[{}];
$scope.eventos =[{}];
var URLEvents = "/api/events/";
//Abrimos modal y les pasamos los eventos de esa instalación
$scope.open = function (object) {
$http.get(URLEvents + object.liftsiteid, $scope)
.success(function (data) {
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;
}
}
});
})
})
.error(function (data) {
window.alert('Something Wrong...');
});
};
var URLOperation ="/api/sites";
//Funci?n que devuelve las instalaciones de un usuario
$http.get(URLOperation, $scope)
.success(function(data) {
var groups = data;
angular.forEach(groups, function(group) {
var group2 = group;
angular.forEach(group2.sites, function(group3){
$scope.longitud.push(group3);
$scope.objects.push(group3);
$scope.predicate = 'msisdn';
$scope.reverse = true;
$scope.order = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
})
});
})
.error(function(data) {
window.alert('Something Wrong...');
});
});
//Abrimos el modal y le enviamos los eventos
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, $anchorScroll){
$anchorScroll();
$scope.eventos =[{}];
$scope.eventos.push(items);
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
Вы могли бы хотеть пост только в соответствующих разделах спариваться, трудно следовать код не тратя на это слишком много времени. –