I trying to do a modal that show events in a table but when i do the ng-repeat only show one item and i don't know why.
If someone can help me i will be very grateful,
The html is the following:
<!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>
And the controller is the following. The modal is inside a table with parent child.
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');
};
});
You're providing a lot of code - do you have the same issue for all of your lists and tables?
My first guess would be the initialization of the arrays:
$scope.grupos =[{}];
Try setting an empty array instead of an array with the first element being empty:
$scope.grupos = [];
Since you push new elements into the arrays when receiving your data, the first empty item will always be stuck in the data and might lead to your issues.
Another issue is in getting the "eventos": $scope.eventos = event;
I think this should be a push instead: $scope.eventos.push(event);
No offense - maybe you should try to get a better understanding of these basic concepts in Javascript (you're already using most of them correctly, but some look kind of mixed up):
Object initialization: var obj = {}; - this would be an empty object with no properties.
Array initialization: var arr = []; - this would be an empty array with no elements.
Therefore var x = [{}] will result in x being an array with an empty object.
You're trying to open one modal per event rather than one modal for all of the events.
Try replacing:
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;
}
}
});
})
with
$scope.eventos = data;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return $scope.eventos;
}
}
});
and replace your modal instance with:
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, $anchorScroll){
$anchorScroll();
$scope.eventos = items;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Related
I know that similar questions have been asked and I have tried there answers but they have not worked for me, hence I'm asking new question, here is my code:
hbs:
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<title>UI</title>
<div ng-controller="appCtrl">
<button type="button" ng-click="openModal()">Abc</button>
</div>
<script type="text/ng-template" id="checklistModal.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body" id="modal-body">
<div style="padding-left: 3%; padding-right: 3%; margin-bottom: 8%;">
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;table-layout:fixed;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:block;height:164px;overflow:auto;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary pull-right" ng-click="" style="float:right;">Save</button>
</div>
</div>
</div>
</div>
</script>
And here is corresponding js:
var app = angular.module("demoApp", ['ui.bootstrap']);
app.controller("appCtrl",['$scope', '$uibModal', function($scope, $uibModal) {
'use strict';
$scope.openModal = function(){
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: "checklistModal.html",
controller: 'ChecklistModalInstanceCtrl',
scope: $scope,
size: "lg",
appendTo: parentElem,
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
});
}
}]);
app.controller('ChecklistModalInstanceCtrl', function($scope) {
});
Error I get is: Unknown provider: $uibModalProvider <- $uibModal <- appCtrl
If, I change first line of js:
var app = angular.module("demoApp", []);
Error I get is: Failed to instantiate module demoApp
Answers to similar questions I found did not work, can anyone please help?
You need to inject ui.bootstrap as a dependency to your module,
var app = angular.module('app',['ui.bootstrap']);
also add the reference as well
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
Below are my html and js code if i use the below angular js refrence 1.3.0 beta i am able to load the grid with data but my popup doesnt load, and if i try to remove the reference with other version my popup loads but grid dosent
popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<!--<script src="https://code.angularjs.org/1.5.1/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<script src="popup.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
<div class="container" ng-controller="TestCtrl" ng-init="firstCall()">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" ng-app="app" ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div>
<div>
Defect Area:
<select ng-model="details.DefectArea">
<option value="" disabled="disabled" selected="selected"></option>
<option value="Scheduler">Scheduler</option>
<option value="ShopApp">ShopApp</option>
<option value="Process Claims">Process Claims</option>
<option value="TR Workbench">TR Workbench</option>
<option value="QFC Workbench">QFC Workbench</option>
<option value="WS Workbench">WS Workbench</option>
<option value="SysAdmin">SysAdmin</option>
</select>
</div>
<hr />
<div>
Defect Summary:
<input type="text" style="height:28px;width:27%" ; placeholder="" ng-model="details.DefectSummary">
</div>
<hr />
<div>
Defect Details:
<input type="text" style="height:28px;width:50%" ;placeholder="" ng-model="details.DefectDetails">
</div>
<hr />
<input type="button" ng-click="SendData(details)" value="Add" />
</div>
</div>
</div>
</div>
</div>
</script>
<h4 style="color:blueviolet">{{value}}</h4>
<div class="table-responsive com-table">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th width="5%" style="background-color:cadetblue" ;>DefectArea</th>
<th width="15%" style="background-color:cadetblue" ;> DefectSummary</th>
<th width="15%" style="background-color:cadetblue" ;>DefectDetails</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="CU in DefectList" style="background-color:darkgray" ;>
<td width="5%"><span ng-bind=CU.DefectName></span></td>
<td width="15%"><span ng-bind=DefectSummary></span></td>
<td width="15%"><span ng-bind=CU.DefectDetails></span></td>
</tr>
</tbody>
</table>
<div class="collapse">
<div class="well">
</div>
</div>
</div>
<hr />
</div>
</body>
</html>
Popup.js
var app = angular.module('app', ['angularModalService']);
app.controller('TestCtrl', function ($scope, ModalService) {
$scope.show = function () {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function (modal) {
modal.element.modal();
modal.close.then(function (result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function ($scope, close) {
$scope.close = function (result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
var TestCtrl = function ($scope, $http) {
$scope.firstCall = function () {
$http({
url: "NewRoute/getDataForAngularGrid",
dataType: 'json',
method: 'GET',
data: '',
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
debugger;
$scope.DefectList = response;
})
.error(function (error) {
alert(error);
});
}
$scope.SendData = function (Data) {
var GetAll1 = new Object();
GetAll1.DefectName = Data.DefectArea;
GetAll1.DefectSummary = Data.DefectSummary;
GetAll1.DefectDetails = Data.DefectDetails;
$scope.IsToBeShown = true;
$http({
url: "NewRoute/firstCall",
dataType: 'json',
method: 'POST',
data: GetAll1,
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
$scope.value = response;
$scope.firstCall;
})
.error(function (error) {
alert(error);
});
}
};
Since I am new to AngularJS I have come across an issue when it comes to presenting my database data which has been mapped using Rest and manipulated using JPA. So it is as ready as it can be. No need for further manipulation. Now using the $http.get I have been able to present the first table just calling the url but when it comes to getting data presented from a different table by sending a parameter something doens't work out.
In the module.js it looks like this
(function () {
'use strict';
angular.module('app',[]);
})();
The controller.js like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['$http'];
function MyController($http) {
var vm = this;
vm.players = [];
vm.historia = [];
vm.getAll = getAll;
vm.getHistory = getHistory;
init();
function init(){
getAll();
getHistory(name);
}
function getAll(){
var url = "/all/players";
var playersPromise = $http.get(url);
playersPromise.then(function(response){
vm.players = response.data;
});
}
function getHistory(name){
var url = "/all/allplayergames/" + name;
var historiaPromise = $http.get(url);
console.log([url]);
historiaPromise.then(function(response){
vm.historia = response.data;
console.log([response.data]);
});
}
}
})();
and last but not least html
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link th:if="${mode=='development'}" rel="stylesheet" href="../static/bootstrap.css" th:href="#{/bootstrap.css}"/>
<link th:if="${mode=='production'}" rel="stylesheet" href="../static/bootstrap.min.css" th:href="#{/bootstrap.min.css}"/>
<script type="text/javascript" src="/static/angular.min.js" th:src="#{/angular.min.js}" ></script>
<script type="text/javascript" src="/static/app/app.module.js" th:src="#{/app/app.module.js}" ></script>
<script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="#{/app/yatzy.controller.js}" ></script>
</head>
<body ng-app="app" >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Game Results</a>
</div>
</div>
</nav>
</header>
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div ng-controller="MyController as vm">
<div class="btn-group" role="group">
<button ng-click="vm.getAll()" type="button" class="btn btn-default">Player Game History</button>
</div>
<table class="table">
<thead>
<tr>
<th>PlayerID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in vm.players">
<td> {{player.playerid}}</td>
<td> {{player.name}}</td>
<td>
<button class="btn btn-danger" ng-click="vm.getHistory(player.name);
">View History</button>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.historia">
<td> {{p.score}}</td>
<td> {{p.player.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >
<div class="container">
<p th:text="${#dates.format(datetime,'dd MMM yyyy HH:mm')}" class="text-muted">Todays date: </p>
</div>
</footer>
</body>
</html>
And the console log does show the right player url when the "View History" is clicked, but it doesnt get the data from the table that is the score or the name.
I'm working on a test project with angular, but sudently it stopped working!
I don't changed anything in the project, but know if I enter on a list for e.g, where before I saw "description" now I see the tags {{obj.descrip}}!
It is happening with all my fields.
My browser console log doesn't show anything.
All my imports are correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
My page
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page session="true"%>
<!doctype html>
<html data-ng-pp="caixaApp">
<head>
<title>Barattie ~ Soluções Integradas</title>
<link rel="icon"
href="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2015/May/27/3957014059-5-barattieproject-avatar.png">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name='robots' content='noindex,nofollow'/>
<script src="<c:url value='/resources/js/jquery-latest.min.js' />"></script>
<script src="<c:url value='/resources/js/angular.js' />"></script>
<script src="<c:url value='/resources/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/ui-bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/CaixaController.js' />"></script>
</head>
<body data-ng-controller="caixaCtrl">
<%# include file="/resources/html/menu_inc.jsp"%>
<alert data-ng-repeat="alert in alerts" type="alert.type" close="fecharAlert($index)">{{alert.msg}}</alert>
<section>
<button data-ng-click="abrir()" class="btn btn-sm btn-primary pull-right">Novo Registro</button>
</section>
<br/>
<table data-ng-table="tabela" class="table table-hover">
<thead>
<tr>
<th>Descrição</th>
<th>Saldo</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="caixa in caixas | orderBy: ['ativo','descricao']">
<td>
<span>{{caixa.descricao}}</span>
</td>
<td>
<span>{{caixa.saldo | currency}}</span>
</td>
<td>
<button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>
<button data-ng-click="manter(caixa.id, !caixa.ativo)" class="btn btn-default btn-xs">{{caixa.ativo ? 'Desativar' : 'Ativar'}}</button>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="add_modal">
<div class="modal-header">
<h3>Caixas</h3>
</div>
<div class="modal-body">
<!--<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>-->
<form name="addForm" class="form-horizontal">
<input id="id" type="hidden" data-ng-model="caixa.id" />
<div class="control-group">
<label class="control-label" for="name">Descrição</label>
<div class="controls">
<input id="descricao" name="descricao" data-ng-model="caixa.descricao" type="text" placeholder="Ex. Caixa 01" class="input-xlarge" required="" ng-class="{error: caixa.descricao.$invalid && !caixa.descricao.$pristine}" required/>
</div>
</div>
<div class="control-group" ng-class="{error: caixa.saldo.$invalid && !caixa.saldo.$pristine}">
<label class="control-label" for="saldo">Saldo</label>
<div class="controls">
<input id="saldo" name="saldo" data-ng-model="caixa.saldo" type="text" placeholder="0.00" class="input-xlarge" required />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="salvar()" ng-disabled="caixa.$invalid" class="btn btn-success"><i class="icon-white icon-plus"></i> Salvar</button>
<button ng-click="cancelar()" class="btn">Cancelar</button>
</div>
</script>
</body>
</html>
Controller
var app = angular.module('caixaApp', ['ui.bootstrap']);
app.controller('caixaCtrl',[ '$scope', '$http', '$modal', function($scope, $http, $modal) {
$http.defaults.headers.post['Content-Type'] = 'application/json';
$scope.alerts = [];
var urlBase='/sistem/';
function lista() {
$http.get(urlBase + 'caixas/consultar').success(function(data) {
$scope.caixas = data;
});
}
//Carrega a lista geral assim que o documento é iniciado
lista();
//Fecha a mensagem de alerta
$scope.fecharAlert = function(index) {
$scope.alerts.splice(index, 1);
};
// Abre a modal
$scope.abrir = function(caixaId) {
var modalInstance = $modal.open({
templateUrl: 'add_modal',
controller: modalCtrl,
resolve: {
id: function() {
return caixaId;
}
}
});
modalInstance.result.then(function () {
//Atualiza a lista apenas no metodo .close() do modal.
lista();
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Registro salvo"
});
});
};
//controller da modal
function modalCtrl($scope, $modalInstance, id) {
$scope.alerts = [];
$scope.caixa = {};
//Carrega o objeto no modal se for alteracao
if (angular.isDefined(id))
$http.post(urlBase + 'caixas/alterar/'+id).success(function(data) {
$scope.caixa = data;
});
//fecha o modal
$scope.cancelar = function() {
$modalInstance.dismiss('cancel');
};
// mantem o usuario
$scope.salvar = function() {
$http.post(urlBase + 'caixas/adicionar', $scope.caixa).success(function(data) {
$modalInstance.close();
});
};
}
//Ativa / Desativa o material
$scope.manter = function manter(id, manter) {
$http.post(urlBase + 'caixas/manter/'+id+'&'+manter).success(function(data) {
$scope.caixas = data;
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Manutenção realizada"
});
});
};
}]);
Your scripts should be at the bottom of the page.
Please put the CaixaController.js at the bottom of the page, just before the body closing tag. Hope that would resolve the issue.
UPDATED:
Please correct data-ng-pp="caixaApp" to data-ng-app="caixaApp". 'a' is missing. Hope this resolves the issue :)
here is the index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
<title>get some data from the database</title>
</head>
<body ng-controller="delayController">
<div ng-controller="customersCrtl">
<div class="container">
<br/>
<blockquote><h4 dir="rtl" align="center">test</h4></blockquote>
<br/>
<div dir="rtl" class="row">
<div class="col-md-2">num of items per page:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">search:
<input type="text" ng-model="search" ng-change="filter()" placeholder="enter what you are looking for" class="form-control" />
</div>
<div dir="rtl" class="col-md-4">
<h5>showing {{ filtered.length }} out of {{ totalItems}} items</h5>
</div>
</div>
<br/>
<div dir="rtl" align="center" class="alert alert-info" ng-show="loading"><img ng-src="images/131.gif"/><h2>loading details...</h2>
<div ng-controller="customersCrtl" class="container">
<progressbar class="progress-striped active" type="info" animate="true" max="100" value="progressBar.progress"><b>{{progressBar.progress}}%</b></progressbar>
</div>
</div>
<div class="row" dir="rtl">
<div dir="rtl" class="col-md-12" ng-show="filteredItems > 0">
<table align="right" dir="rtl" class="table table-striped table-bordered">
<thead>
<th>item name <a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>item price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.name}}</td>
<td>{{data.price}}
<img src="images/binoculars.png" height="12" width="12"></td>
</tr>
</tbody>
</table>
</div>
<div dir="rtl" class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>לא נמצאו מוצרים.</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="דף קודם" next-text="דף הבא"></div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-bootstrap-lightbox.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="js/angular-count-to.js"></script>
<script src="app/app.js"></script>
</body>
</html>
This is the app.js
var app = angular.module('myApp', ['ui.bootstrap','countTo']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|file|data):/);
}]);
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$scope.$emit('LOAD');
$scope.progressBar = { progress : 0 };
$http.get('ajax/getCustomers.php').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 50; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.$emit('UNLOAD');
});
(function progress(){
if($scope.progressBar.progress < 100){
$timeout(function(){
$scope.progressBar.progress += 1;
progress();
},100);
}
})();
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.controller('delayController',['$scope',function($scope){
$scope.$on('LOAD',function(){$scope.loading=true});
$scope.$on('UNLOAD',function(){$scope.loading=false});
}]);
As you can see, at the moment, the image is opened in a new tab/window and it looks a bit off. This is the reason for wanting it to be opened in a modal like window.
You can pass any controller to the bootstrap modal service as so.
Just create your controller and place your image data on its scope.
Then, pass it to the open call of the modal service.
http://plnkr.co/edit/8TfCPs?p=preview
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
var parentScope = $scope;
$scope.imgs =[];
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
Now, as an addendum based on your comments, if you are using image data encoded in base64 you will need to build up the url using $sce.trustAsResourceUrl
https://docs.angularjs.org/api/ng/service/$sce
http://plnkr.co/edit/jRXHL3zSR8rDT1sJJ1tw?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<img ng-src="{{imgUri}}"/>
<script>
var app = angular.module("app",[]);
app.controller("testCtrl",function($scope,$sce){
var data="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";
$scope.imgUri = $sce.trustAsResourceUrl("data:image/png;base64," + data);
});
angular.bootstrap(document,[app.name]);
</script>
</body>
</html>
You can use ng-src Use:
<img ng-src="data.imagedata" alt="Description"/>