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"/>
Related
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);
});
}
};
I have an angular model which gets the data through a JSON call and shows as follows. After making a second JSON how can I refresh this list.
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
I inject the data initially through this:
$http.get("").success(function (response) {$scope.names = courseParsed;});
You can check it out below.
http://findcourse.parseapp.com/
I am adding the full code to make it easier, through the "Select and Search" Button ($scope.names[0].name = "test"; $scope.names.splice(1, 1)), I am trying to modify the list, even though it worked once, now it is not working at all.
var app = angular.module('myApp', []);
var queryParam ={};
app.controller('customersCtrl', function($scope, $http, $q) {
Parse.$ = jQuery;
Parse.initialize("mvLeLP1wbRJW24ESjaUEgPueWHpMLNZNvwLnTTJW", //"applicationId":
"NqwHrO9MjC9uLgqu4zNIi6u9TC19GVRbMmNxXTag"); //JavaScript Key
var Article = Parse.Object.extend('coursesParse');
$scope.master = {};
$scope.update = function(user) {
//$scope.master = angular.copy(user);
//alert(user.degree+" "+user.industry);
//alert($scope.names[0].name);
$scope.names[0].name = "test";
$scope.names.splice(1, 1);
};
var myLat = -37.875773;
var myLng = 145.087829;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getPosition);
} else {
alert("Please allow using your location to see the courses around you!");
}
function getPosition(position) {
myLat = position.coords.latitude;
myLng = position.coords.longitude;
var mapOptions = {
center: new google.maps.LatLng(myLat, myLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
var ArticleDfd = $q.defer();
var queryInitial = new Parse.Query(Article);
//queryInitial.equalTo('name', 'Electrical Supply');
var geoPoint = ({latitude: myLat, longitude: myLng});
queryInitial.near("coords", geoPoint);
queryInitial.limit(4);
queryInitial.find().then(function (data) {
var courseParsed = [];
for (var i = 0; i < data.length; i++) {
courseParsed[i] = {
"name": data[i].get('name'),
"description": data[i].get('description'),
"length": data[i].get('length'),
"place": data[i].get('place'),
"comment": data[i].get('comments'),
"image": data[i].get('images'),
"webLink": data[i].get('weblink'),
"xCor": data[i].get('coords').latitude,
"yCor": data[i].get('coords').longitude
};
//for (var prop in courseParsed[i]) {alert(prop + " = "+ courseParsed[i][prop])};
}
for(var i=0;i<courseParsed.length;i++){
//alert(courseParsed[i]['xCor'], courseParsed[i]['yCor']);
//alert(courseParsed[i]['xCor']);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(courseParsed[i]['xCor'], courseParsed[i]['yCor']),
//icon: "img/icon.png",
map: map,
title: 'Hello World!'
});
}
ArticleDfd.resolve(data);
$http.get("").success(function (response) {$scope.names = courseParsed;});
}, function (error) {
ArticleDfd.reject(data);
});
ArticleDfd.promise
.then(function (article) {
$scope.currentArticle = article;
})
.catch(function (error) {
//do something with the error
});
});
HTML page:
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/controllers.js"></script>
<script src="js/effect.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/app.css">
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="map">Loading...</div>
<div id="searchForm" ng-controller="customersCtrl">
<form novalidate>
<select type="text" ng-model="user.degree">
<option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
</select>
<select type="text" ng-model="user.industry">
<option>Finance</option><option>Construction</option><option>Energy and Power</option>
</select>
<!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>-->
<input type="submit" ng-click="update(user)" value="Select and Search" />
</form>
</div>
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
<!--<p> {{ x.length + ', ' + x.description }}
<p> {{ x.comment }} </p> </p> -->
</div>
</body>
</html>
All you have to do is to move your ul inside the div above.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/controllers.js"></script>
<script src="js/effect.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/app.css">
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="map">Loading...</div>
<div id="searchForm" ng-controller="customersCtrl">
<form novalidate>
<select type="text" ng-model="user.degree">
<option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
</select>
<select type="text" ng-model="user.industry">
<option>Finance</option><option>Construction</option><option>Energy and Power</option>
</select>
<!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>-->
<input type="submit" ng-click="update(user)" value="Select and Search" />
</form>
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
</div>
</div>
</body>
</html>
after calling second JSON. assign result to 'names' variable. then use following code
$route.reload();
I think you need to place your $http call in $scope.getData function & call it again whenever you wanted to reload data. ng-repeat will do the magic for you of refreshing data as any change occurred in names object. Basically any change in names will render those many ul's on view.
I have two pages of html. one is the main page and the other is the modal page.
I use one angular app to connect between them. I get input in the modal page and i want to show it in the main page. i don't know how to do it, although I think it might work with service.
the main page:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<table ng-controller="tableCtrl">
<thead>
<th class="col-lg-3">Username</th>
<th class="col-lg-3">Password</th>
<th class="col-lg-3">First name</th>
<th class="col-lg-3">Last name</th>
</thead>
<tbody>
<tr ng-repeat="User in Users">
<td class="col-lg-3">{{User.userN}}</td>
<td class="col-lg-3">{{User.PassW}}</td>
<td class="col-lg-3">{{User.Name}}</td>
<td class="col-lg-3">{{User.LastName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
the modal page :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="vandors/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl" ng-submit="ok()">
<div class="modal-header">
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username : </label>
<input type="text" placeholder="Ariel73" ng-model="userN">
</div>
<div class="form-group">
<label>Password : </label>
<input type="text" placeholder="Aa123456" ng-model="PassW">
</div>
<div class="form-group">
<label>First name : </label>
<input type="text" placeholder="Ariel" ng-model="Name">
</div>
<div class="form-group">
<label>Last name : </label>
<input type="text" placeholder="Livshits" ng-model="LastName">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
</form>
</body>
</html>
the app page :
app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'table.html',
controller: 'ModalInstanceCtrl',
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('tableCtrl',function($scope){
$scope.Users = [
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'}
];
$scope.addRow = function () {
$scope.Users.push({'userN' : $scope.userN, 'PassW' : $scope.PassW, 'Name' : $scope.Name, 'LastName' : $scope.LastName});
$scope.userN = '';
$scope.PassW = '';
$scope.Name = '';
$scope.LastName = '';
}
});
Angular is used with Single Page Applicaton layout, it seems that must only exists a single page for application (ng-app) and it may use multiple partials or templates.
Usually the main page contais the web layout (header, navbar, content, footer) and with the templates switch the content according to the current state (managed by the url)
In your example the main page will be the "single page" and the modal will be s partial/template. This template could be request to the server as response of table.html or defined as a template within the main page using <script type='text/ng-template' id='table.html'>.
app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log) {
$scope.Users = [{
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'table.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(newUser) {
$scope.Users.push(newUser);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close({
'userN': $scope.userN,
'PassW': $scope.PassW,
'Name': $scope.Name,
'LastName': $scope.LastName
});
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AppCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<table>
<thead>
<th class="col-lg-3">Username</th>
<th class="col-lg-3">Password</th>
<th class="col-lg-3">First name</th>
<th class="col-lg-3">Last name</th>
</thead>
<tbody>
<tr ng-repeat="User in Users">
<td class="col-lg-3">{{User.userN}}</td>
<td class="col-lg-3">{{User.PassW}}</td>
<td class="col-lg-3">{{User.Name}}</td>
<td class="col-lg-3">{{User.LastName}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="table.html">
<form ng-submit="ok()">
<div class="modal-header" >
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username :</label>
<input type="text" placeholder="Ariel73" ng-model="userN">
</div>
<div class="form-group">
<label>Password :</label>
<input type="text" placeholder="Aa123456" ng-model="PassW">
</div>
<div class="form-group">
<label>First name :</label>
<input type="text" placeholder="Ariel" ng-model="Name">
</div>
<div class="form-group">
<label>Last name :</label>
<input type="text" placeholder="Livshits" ng-model="LastName">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</script>
</body>
</html>
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 :)
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');
};
});