My js file:
var camListApp = angular.module('camListApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination'])
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", function($scope, $http, $uibModal){
$scope.open = function (url){
$scope.imageView = url;
var modalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'ModalInstanceCtrl',
resolve: {
records : function () {
return $scope.imageView;
}
}
});
}
$http.get('http://localhost:8081/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
});
angular.module('camListApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, records) {
$scope.records = records;
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
My html file:
<html ng-app"camListApp">
<div ng-controller="Hello">
<table border = 1>
<thead>
<tr>
<th>CamID</th>
<th>Timestamp</th>
<th>Image</th>
<th>View image</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="record in records | itemsPerPage:5 | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><img ng-src="http://localhost:9100/Images/{{record.filename}}.png" width="40" height="50"></td>
<td><button class="btn btn-primary" ng-click="open(record.filename)">View</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="popup.html">
<div class="modal-header">
<h3 class="modal-title">Image View</h3>
</div>
<div class="modal-body">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" width="40" height="50"></div>
<div class="modal-footer">
<button class="btn btn-warning" onclick="location.href='http://localhost:8082/';">Cancel</button>
</div>
</script>
I was trying to display my images on the modal form using bootstrap ui but don't know why the images does not display on the modal. Anybody can help me solve this? My images are store in a web server folder and retrieve it from there.
index.html
----------
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<img ng-repeat="img in imgs" ng-src="{{img}}"/> {{img}}
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
example.js
---------
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
$scope.open = function () {
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"));
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
Demo
Related
I am relatively new to angular and I have integrated Bootstrap modal to my project but I am not able to use the value from "programcontroller".
I want id_program from "programcontroller" inside the "ModalInstanceCtrl" controller. I tried adding it in the RESOLVE but I was not able to get the data.
I got the hardcoded data using the RESOLVE from "programcontroller" successfully inside "ModalInstanceCtrl" controller of modal.
But since I get the id_prgram using this snipet:
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
The above code is inside ng-repeat block and gets populated. I do know that it is because of asynchronous that causes the problem.
I have attached the code for your reference.
catalogapp.controller('programcontroller', function ($scope, $uibModal, $log, $routeParams) {
$scope.id_program = "";
$scope.title_program = "";
$scope.filter_program = $routeParams.seasonId;
$scope.season_number = $routeParams.seasonNumber;
$scope.model = {
//got this from previous HTML page as routeparams
season_id : $routeParams.seasonId
}
$scope.animationsEnabled = true;
$scope.program_array = [
{
"_id" : "program:a8097ae943bdbd372906ea494ddecbf2",
"series" : "series:fcde9691e624ba50df9be71735f4bb14",
"title" : "title1",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
},
{
"_id" : "urn:esp:hbo:program:testprogram20160310",
"title" : "title1",
"series" : "series:4f19358c7377482f1310e5cfa06c5bd2",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
}
]
$scope.items = [
{
"title" : "title",
"_id" : "program:version:2541203f297f8f0d",
"shortTitle" : "shtitle",
"program" : "program:f555feb8dafc1bae42d",
},
{
"title" : "title2",
"_id" : "program:version:40a2313f297f8f0d",
"shortTitle" : "shtitle2",
"program" : "program:f55asfsa57927411bd6545feb8dafc1bae42d",
},
{
"title" : "title3",
"_id" : "program:version:403f297f8f0d",
"shortTitle" : "shtitle3",
"program" : "program:asdf5557927411bd6545feb8dafc1bae42d",
}
]
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
backdrop: 'static',
resolve: {
items1: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
});
catalogapp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
$scope.items = items1;
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
HTML Code is given below!!!!
<!doctype html>
<html>
<head>
<title>HBO ESP Console</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/controllers/programcontroller.js"></script>
</head>
<body style="background-color:#44484a">
<h2>Program List</h2>
<script type="text/ng-template" id="myModalContent.html">
<body ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3 class="modal-title">Program Version</h3>
</div>
<div class="modal-body" style="float:left">
<ul ng-repeat="item in items" style="list-style-type:none">
<li class="image">
<button type="button" style="background-color: #555555" class="btn btn-default">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</body>
</script>
<div ng-controller="programcontroller">
<input ng-hide=" true" type="text" ng-model="filter_program"><br><br>
<p ng-hide=" true">Season_id: {{model.season_id}}</p>
<p style="font-size:18px">Season Number:{{season_number}}</p>
<div style="float:left">
<div style="float:left">
<ul ng-repeat=" item in program_array | filter : filter_program" style=" list-style-type:none;float:left">
<li class="image">
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
<input type="text" ng-hide=" true" ng-model="title_program" ng-init="title_program=item.title">
<button type="button" style="background-color: #555555" class="btn btn-default" ng-click="open('lg')">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
<p>{{item.title}}</p>
{{id_program}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
PLEASE help me with this guys!!!!!! Thanks
You are trying to access the filter value even before angular has processed it.
Here is the solution
<ul ng-repeat="it in itm">
<li>
{{it._id}}
<input type="text" ng-hide="true" >
<button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button>
</li>
</ul>
Controller
$scope.setFilter = function (filterValue) {
$scope.filter = filterValue;
}
Here is the Plunkr
Hope this helps!!
remove ng-controller="ModalInstanceCtrl" from
<script type="text/ng-template" id="myModalContent.html">
and see what happens.
This is my code
var app = angular.module('drinks-app', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, Drink) {
'use strict';
Drink().then(function(drinks) {
$scope.drinks = drinks;
});
$scope.deleteItem = function(item) {
console.log("deleting item " + item.name);
};
});
app.factory('Drink', function($http) {
'use strict';
return function() {
return $http.get('drinks.json').then(function(response, status) {
return response.data;
});
};
});
app.directive('ngConfirm', function($modal, $parse) {
return {
// So the link function is run before ngClick's, which has priority 0
priority: -1,
link: function(scope, element, attrs) {
element.on('click', function(e) {
// Don't run ngClick's handler
e.stopImmediatePropagation();
$modal.open({
templateUrl: 'ng-delete-template',
controller: 'ngConfirmController',
resolve: {
message: function() {
return attrs.ngConfirm;
}
}
}).result.then(function() {
// Pass original click as '$event', just like ngClick
$parse(attrs.ngClick)(scope, {$event: e});
});
});
}
};
});
app.controller('ngConfirmController', function($scope, $modalInstance, message) {
$scope.message = message;
$scope.yes = function() {
$modalInstance.close();
};
$scope.no = function() {
$modalInstance.dismiss();
};
});
<!DOCTYPE html>
<html ng-app="drinks-app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
<script type="text/ng-template" id="ng-delete-template">
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left" ng-click="no()">No</button>
<button class="btn btn-primary pull-right" ng-click="yes()">Yes</button>
</div>
</script>
<script type="text/ng-template" id="ng-add-template">
<div class="modal-body">
<select >
<option value="emp" >emplopyee</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left">ADD</button>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Delete</button>
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Add</button>
</div>
</body>
</html>
Thsi is my plunker : http://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview
In the above code use ui.bootstrap for model popup (delete), now i want to use same model popup for display another template . that means i have two dropdown display list of employees and departments. In previous popup display delete information text only and templateUrl :- assign delete.html page statically. now i want to assign dynamic path to templateUrl in AngularJs model popup
You could pass template name from directive attribute & then place it over $modal.open's templateUrl option like
<button template-path="abc.html" class="btn btn-small" type="button"
ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">
Delete
</button>
Then in directive
templateUrl: attrs.templatePath || 'ng-confirm-template',
Demo Here
I have the below angularjs code which creates tabs by pressing the new button. But the newly created tab does not get active or selected after creation. Always the one before the last one get active !
Anyone knows what is wrong?
plnkr : https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview
HTML :
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsParentController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
Sure to delete?
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<uib-tabset active="active">
<uib-tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
<button class="btn" type="button" ng-click="open('sm',workspace)">Delete</button>
</div>
</uib-tab>
<uib-tab index="0" select="addWorkspace()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Javascript :
var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
app.controller("TabsParentController", function ($scope,$uibModal) {
$scope.animationsEnabled = true;
$scope.open = function (size, workspace) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
workspace: function () {
return workspace;
}
}
});
modalInstance.result.then(function (selectedItem) {
var index=$scope.workspaces.indexOf(selectedItem)
$scope.workspaces.splice(index,1);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
var setAllInactive = function() {
//angular.forEach($scope.workspaces, function(workspace) {
// workspace.active = false;
// });
};
var addNewWorkspace = function() {
var id = $scope.workspaces.length+1 ;
$scope.workspaces.push({
id: id,
name: "Workspace " + id,
});
$scope.active=$scope.workspaces.length -1;
};
$scope.workspaces =
[
];
$scope.addWorkspace = function () {
setAllInactive();
addNewWorkspace();
};
$scope.remove=function(item){
var index=$scope.workspaces.indexOf(item)
$scope.workspaces.splice(index,1);
}
});
angular.module('plunker').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, workspace) {
$scope.selectedworkspace = workspace;
$scope.ok = function () {
$uibModalInstance.close( $scope.selectedworkspace );
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
app.controller ("TabsChildController", function($scope, $log){
});
If you want to the newest tab as active, you will want to set the
$scope.active = $scope.workspaces.length;
but the other problem is that, when you push a new workspace. it takes a bit of time for the directive to re-render the DOM and get all the scope variables ready. therefore right after push, if you attempt to assign the newest tab as active will result in error.
So, to quickly prove my point (no the most correct way), try this and your code to will work. Remember to inject $timeout as a dependency
app.controller("TabsParentController",
function ($scope,$uibModal, $timeout) {
....
....
$scope.workspaces.push({
id: id,
name: "Workspace " + id,
});
//introduce a 50 ms delay before setting the active tab
$timeout(function(){
$scope.active = $scope.workspaces.length;
}, 50);
....
....
}
);
see it in plunker
I'm trying to add multiple dialogs modals on my homepage but I may doing something wrong.
I've downloading this plunker preview : Preview
But I have this console's error , "Error: [ng:areq] Argument 'addManagerModal' is not a function, got undefined" after adding ui-bootstrap and angular.
The code look very simple but it's not working:
HTML:
<!DOCTYPE html>
<html ng-app='modalviews'>
<head>
<title> My app title</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
<div class="span12" style="background-color:">
<div class="span2 nav1" style="background-color:#EFEFEF">
<ul style="padding:45px 0px 10px 5px">
<div ng-controller="addManagerModal">
<script type="text/ng-template" id="addManager.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is manager
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<a ng-click="open()">Add Manager</a>
</div>
<div ng-controller="addCaptainModal">
<script type="text/ng-template" id="addCaptain.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is captain
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<a ng-click="open()">Add Captain</a>
</div>
</ul>
</div>
</div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="modal.js"></script>
</body>
</html>
JAVASCRIPT:
angular.module('modalviews', ['ui.bootstrap']);
// add manager Modal
var addManagerModal = function($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'addManager.html',
controller: ModalInstanceCtrl});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
//add Captain modal
var addCaptainModal = function($scope, $modal) {
$scope.open = function () {
var captainModalInstance = $modal.open({
templateUrl: 'addCaptain.html',
controller: captainModalInstanceCtrl});
};
};
var captainModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I hope somebody can help me.
I think you need to add these as controllers instead of just vars using angular.
angular.module('modalviews')
.controller('addManagerModal', function($scope, $modal) {
...
}
Thanks man,
I've changed the js file for this :
'use strict';
angular.module('weShareApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('weShareApp').controller('loginModalCtrl', function ($scope, $uibModal, $log) {
$scope.items = [];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'loginModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
angular.module('weShareApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
Unfortunetly I don't any errors but I can't click on my buttons and the bootstrap.css seems to be load...
My code is like this
angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [ '$scope', '$modal',
function($scope, $modal) {
var data = [];
data.push("first message");
this.openReprintModal = function() {
var modalInstance = $modal.open({
templateUrl: 'ReprintModal.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function() {
return data;
}
}
});
};
this.openReprintModal();
}
]);
angular.module('RateRequestApp.controllers').controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
<div id="RateRequestApp" class="content" ng-app='RateRequestApp' ng-controller="ReadOnlyController">
<script type="text/ng-template" id="ReprintModal.html">
<div class="modal-header">
<h3 class="modal-title">Check this out</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
All works Okay Except there is no message shown at the body of modal. Apparently everyhting works except `
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>`
This part is not working.Can any one point out any possible reason.
Note: I am using this one for model :http://angular-ui.github.io/bootstrap/
You have to inject items object to your ModalInstanceCtrl like this:
angular.module('RateRequestApp.controllers')
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
...
});
And then you are able to access it in your view just like you have it now
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>