I have to write a popup with input text field to be filled inorder to edit the username.When I click the edit button,a popup should be appear with input text field to enter data.The username has to be modified to data whatever I have entered in the input field.How can I implement this by using bootstrap popups in angularjs?
It is quite straightforward to create a popup using angular bootstrap.
Read the documentation. Angular Bootstrap Modal Directive
Below is a simple implementation.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</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>
</body>
</html>
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
I am new to angularJS, also in web development, so here is my problem: I tried to create a book store webpage, where the user utilizes a modal to input data, the problem is when, trying to create a controller for the modal, for the cancel button, it give me the error that you see in the title, that is:
"angular.js:14961 Error: [$injector:unpr]".
I search a lot, but I don't find any solution. I can open the modal.
note: I am not a native English speaker, I tried in the Spanish page, without luck. I hope you can help me.
The code:
my index.html
<!DOCTYPE>
<html >
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src= "app.js" ></script>
</html>
the agregarLibro.html
<html>
<body></body>
<div class="modal-content">
<div class="modal-header" ng-app="app">
<h4 class="modal-title">Agregar libro</h4>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="$ctrl.cancel()">X</button>
<button type="button" class="btn btn-success">Agregar libro</button>
</div>
</body>
</html>
and the app.js
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController",function($scope, $http, $uibModal,){
var control = this;
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
control.open = function(){
var modalInstance = $uibModal.open({
templateUrl: "agregarLibro.html",
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
})
}
});
app.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
There are few mistakes,
(i) You need to embed the scripts within the body tag, not oustside the body tag
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
(ii) You should use `ng-click="ctrl.open()"
<button type="button" class="btn btn-default" ng-click="ctrl.open()">Open me!</button>
(iIi)Remove ng-app from your modal, there can be only one ng-app in an application
<div class="modal-header" ng-app="app">
DEMO
Hi I'm new with Web API's and I'm working with AngularJS and Web API I'm trying to upload an image into a Web API but when I click the button to send the image it gives me an error
I already did the method GET and it shows me all the images that are in that web API but it doesn't work the method POST
here is my code
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/bootswatch.min.css">
</head>
<body>
<div ng-app="MarcasApp" >
<div ng-controller="MarcaController">
<div class="container">
<h2>Muestra</h2>
</div>
<input type="button" class="btn btn-info" value="Todos" ng-click="getTodos()">
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<div class="container">
<label for="caption">Id:</label>
<input type="input" class="form-control" ng-model="txtId"/>
</div>
<div class="container">
<label for="caption">Cargar Marcar:</label>
<input type="file" ng-files="getTheFiles"/>
</div><br>
<div class="container">
<input type="submit" value="Enviar Marca" class="btn btn-success"
ng-click="btnGuardar()"/>
</div><br>
<div class="container">
Mensaje:{{msgGuardar}}
</div>
</form>
<div class="panel panel-info">
<ul class="list-group" ng-repeat="marca in marcas">
<li class="list-group-item">
<img src="{{marca.imagen}}">
{{marca.marca1}} + {{marca.marcaId}}
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="MarcaJson.js"></script>
</body>
</html>
MarcaJson.js
var app = angular
.module("MarcasApp", [])
.controller("MarcaController", function($scope, $http){
$scope.getTodos =function(){
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.get(apiUrl).then(function(response){
$scope.marcas = response.data;
});
};
$scope.btnGuardar = function(){
var datos = {
id: $scope.txtId,
imagen: $scope.getTheFiles
}
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.post(apiUrl, JSON.stringify(datos)).then(function(response){
if (response.statusText == Created){
$scope.msgGuardar = "Marca Guardada";
}
}, function(error){
$scope.msgGuardar = "Ocurrio un error " + error.statusText;
});
};
});
Question:
I can't find a solution how to get the Datepicker to work, in a modal in Angular. (Please see my code sample below)
Sample Code:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal', function($scope, $uibModal){
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
I've also created a plunker for the code sample.
You didn't call / implement the date picker directive on the input field. More precisely, the directive notation changed (to uib-) for angular ui-bootstrap during one of the version changes.
Thus the the correct syntax for your version is:
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Key being to add the uib-datepicker-popup property as stated above.
Running sample:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal',
function($scope, $uibModal) {
$scope.open = function() {
$uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}
]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance',
function($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
]);
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" uib-datepicker-popup />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
I'm working on an app that uses AngularJS and Bootstrap. I am trying to show and hide a dialog from my controller using Bootstrap UI. For some reason, when I try to open the dialog, I just see a blackened screen. However, the dialog never appears.
My Plunker is here
In that plunker, you can see that I have:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
Which looks correct to me. Why is only a black screen appearing? Thank you!
The Bootstrap UI directive just needs the content of your modal as template.
You can simply remove the wrapping tags and it will show as expected:
<div id="scoopModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">...</div></div></div>
var app = angular.module('app', ['ui.bootstrap']);
app.service('myService', ['$http', '$q', function($http, $q) {
this.getOptions = function(prefix) {
return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){
console.log(response.data.results);
return response.data.results;
});
};
}]);
app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) {
$scope.query = 'test';
$scope.newItem_Click = function() {
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
};
$scope.saveItem = function() {
console.log($scope.newItem);
alert('Need to close dialog here.');
};
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="MyController">
<h1>Hello Plunker!</h1>
<button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button>
<script type="text/ng-template" id="item-dialog.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">New Scoop</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="type">Type</label>
<select id="type" class="form-control" ng-model="newItem.typeId">
<option value="-1">Other</option>
<option value="1">Product</option>
<option value="2">Service</option>
</select>
</div>
<div class="form-group">
<label>Text</label>
<textarea class="form-control" rows="3" ng-model="newItem.data"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button>
</div>
</script>
</body>
</html>
For closing the modal you can simply add a controller like this:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm',
controller:function($scope, $modalInstance){
$scope.saveItem=function(){
$modalInstance.close();
};
}
});