I have an input field. On focus a tooltip popups with a button that was added dynamically. How to make ng-click on that button working?
I was looking for solutions, but there is no any clear concrete example.
here is my plunkr: http://plnkr.co/edit/UFv6qcg68wD99HXf76xP?p=preview
Here is the code:
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<p>{{message}}</p>
<br><button class="btn btn-warning" ng-click="removeMessage()">Remove mesage</button>
<br><br>
<input type="text" value="Click me!" uib-popover-html="htmlPopover" popover-trigger="focus" class="form-control">
popover-trigger="focus" class="form-control">-->
</div>
</body>
</html>
controller
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.message = '';
$scope.showMessage = function(){
console.log("Simple message");
$scope.message = "Just added text";
}
$scope.removeMessage = function(){
console.log("Simple message");
$scope.message = "";
}
$scope.test = function(){
console.log("test me click")
}
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'top'
};
$scope.htmlPopover = $sce.trustAsHtml('<button ng-mousedown="test()"><b style="color: red">Add message</b></button> to the <div class="label label-success">page</div> content');
});
Replace uib-popover-html to uib-popover-template and use ng-click instead of ng-mousedown and give little delay to close the popop
<input type="text" ng-model="value" value="{{value}}" uib-popover-template="htmlPopover" popover-trigger="focus" popover-popup-close-delay="1000" class="form-control">
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<button ng-click="test()"><b style="color: red">Add message</b></button>
<div class="label label-success">page</div>
</div>
</script>
sample working code.
http://embed.plnkr.co/deN1VjHdXbTKXlqdQ0vt/
More info regarding Uib https://angular-ui.github.io/bootstrap/#/popover
Use uib-popover-template instead of uib-popover-html:
$scope.htmlPopover ='myPopoverTemplate.html';
<input type="text" value="Click me!" uib-popover-template="htmlPopover" popover-trigger="focus" class="form-control">
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<button ng-mousedown="test()"><b style="color: red">Add message</b></button>
<div class="label label-success">page</div>
</div>
</script>
http://plnkr.co/edit/ERjqaV3IJEtTPDQv9c0l?p=preview
Related
I am new in angular.js. I have to display in a modal the selected value of input, but I don't succeed.
I have the following inputs:
<form>
<input type="radio" name="toggleDiv" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
I have to open a popup dialog and display the value of the selected value.
The moodal:
<div class="row" ng-controller="ModalDemoCtrl">
<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">
{{ inputsVal }}
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
I try the following function:
app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
$scope.open = function () {
$scope.inputsValue=$('input:checked').val()
return $scope.inputsValue
}}
}
your implementation is wrong.check anguar ui bootstrap modal documentation.
You have to do like this
$scope.open = function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.myForm;
}
}
});
in your controller,
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
in html,
<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">
{{ items.input}}
</div>
</script>
<form>
<input type="radio" name="toggleDiv" ng-model="myForm.input" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
edit
If you want to work with jquery way then you need to use $apply()
$scope.$apply(function () {
$scope.inputsValue=$('input:checked').val();
});
hope this helps .. :)
I'm trying to use a form with validation into a ui-bootstrap modal and the modal as a cancel button that just dismisses the view when clicked. The cancel is not working if there is validation errors. if I click again on the button then the modal closes. What am I possibly doing wrong?
http://plnkr.co/edit/loFUvJRfuycxd3qQwMgM?p=preview
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp').controller('TestCTRL', function ($scope,modalService) {
$scope.login = function () {
var modalOptions = {
closeButtonText: 'Cancel',
submitForm : function(form) {
if(form.$valid) {
console.log('Loggin in');
}
}
};
modalService.showModal({}, modalOptions).then(function (result) {
console.log('completed');
});
};
});
angular.module('myApp').service('modalService', function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: 'login.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
});
<!DOCTYPE html>
<html>
<head >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="TestCTRL">
<button type="button" ng-click="login()">Login</button>
</div>
<script src="app.js"></script>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<h1 class="text-center login-title">Login</h1>
<form name="loginForm" ng-submit="modalOptions.submitForm(loginForm)" class="form-signin" novalidate>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input id="email" type="email" name="email" placeholder="Email"
class="form-control" ng-model="user.email" required autofocus>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
<div ng-message="required">Value required</div>
<div ng-message="email">Valid email required</div>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input id="password" type="password" name="password" placeholder="Password"
class="form-control" ng-model="user.password" required>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
<div ng-message="required">password is required</div>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Login
</button>
<button class="btn btn-lg btn-primary btn-block" type="button" ng-click="modalOptions.close()">
{{modalOptions.closeButtonText}}
</button>
</form>
</div>
</div>
</div>
</div>
Thanks so much for your help.
I resolved it by setting the form to pristine before closing the modal, in the cancel action function
function _cancel()
{
$scope.newForm.$setPristine();
$modalInstance.close();
}
first, iam using AngularJS v1.3.14
i try to push : label ,input ,button html element
here my html code:
<div class="container" ng-controller="ctrl" >
<div class="form-inline" ng-repeat="c in controls">
<label class="control-label">Name:</label>
<input class="form-control">
<button class="btn btn-danger">X</button>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
and script code:
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
$scope.controls.push({
...
})
};
});
and my question is: how can i push div with controls id.
try this, you need to dynamically add the html controls in a array then re-rendering the array abject values by using ng-repeat
Html code
<div class="form-inline" ng-repeat="c in controls">
<div ng-bind-html="c.htmlValue | to_trusted"></div>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
Js Code
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
var stringValue="<label class=\'control-label\'>Name:</label><input class=\'form-control\'><button class=\'btn btn-danger\'>X</button>"
$scope.controls.push({ "htmlValue": stringValue })
};
}).filter('to_trusted', ['$sce', function ($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
See this working code in
Plunker
Demo Image
finally i found the solution:
html:
<div class="container" ng-controller="ctrl">
<div class="form-inline" ng-repeat="todo in todos track by $index">
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="todos[$index]">
<button class="btn btn-danger" ng-click="remove($index);">X</button>
</div>
<div class="form-inline">
<button class="btn btn-primary" ng-click="add();">+</button>
</div>
scripts:
angular.module('app', [])
.controller('ctrl', function ($scope) {
$scope.todos = [''];
$scope.add = function () {
$scope.todos.push({});
console.log($scope.todos);
};
$scope.remove = function (index) {
$scope.todos.splice(index, 1);
};
});
hope this help.
The button was not inside the scope of the controller. At the bottom you can find a link with the PLNKR demonstratic a basic use.
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
$scope.controls.push('')
};
});
HTML:
<body ng-app="app">
<div ng-controller="ctrl" >
<div class="container" >
<div class="form-inline" ng-repeat="c in controls">
<label class="control-label">Name:</label>
<input class="form-control" ng-model="c">
<button class="btn btn-danger">X</button>
</div>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
</div>
</body>
Example
I have to show user login page in pop up and have to validate user name and password with the server by using angular js. I create one app model file, and one controller, service and one directive. My code looks like bellow,
app.js
angular.module('mint', ['ngAnimate', 'toastr']);
mycontroller.js
angular.module('mint').controller(
'headercontroller',
[
'$scope',
'headerservice',
'toastr',
function($scope, headerservice, toastr) {
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.userSignin = function(){
$scope.userloginbtn = false;
if($scope.signin_form.$valid){ //Error on this line signin_form is undefine. using $valid for undefine
var record = {};
angular.extend(record, $scope.signinForm);
console.log(record);
}else {
$scope.signin_form.submitted = false;
$scope.userloginbtn = true;
}
};
} ]);
my directive.js file is
angular
.module('mint')
.directive(
'modal',
function() {
return {
template : '<div class="modal fade">'
+ '<div class="modal-dialog">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
+ '<h4 class="modal-title"><span><i class="fa fa-user"></i> {{ title }}</span></h4>'
+ '</div>'
+ '<div class="modal-body" ng-transclude></div>'
+ '</div>' + '</div>' + '</div>',
restrict : 'E',
transclude : true,
replace : true,
scope : true,
link : function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
My html file looks like
<!DOCTYPE html>
<html lang="en" ng-app="mintmygold">
<body>
<div class="container-fluid ban_bg"
ng-controller="headercontroller">
<div class="but_bg">
<button type="button" class="btn btn-default btn_sin" ng-click="toggleModal()">
<span><i class="fa fa-key"></i> Sign In</span>
</button>
</div>
<modal title="Login" visible="showModal">
<form role="form" name="signin_form" class="signup_form" novalidate
ng-model="signin_form">
<div class="form-group">
<p class="infoMsg" ng-model="signinform_info">Please fill in your login credentials:</p>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input ng-model="signinForm.userEmail" name="userEmail" type="email" class="form-control" id="email" placeholder="Enter email" required />
<div
ng-show="signin_form.$submitted || signin_form.userEmail.$touched">
<span ng-show="signin_form.userEmail.$error.required">Enter your
email.</span> <span ng-show="signin_form.userEmail.$error.email">This
is not a valid email.</span>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input ng-model="signinForm.userPassword" name="userPassword" type="password" class="form-control" id="password" placeholder="Password" required />
<div
ng-show="signin_form.$submitted || signin_form.userPassword.$touched">
<span ng-show="signin_form.userPassword.$error.required">Enter your
password.</span>
</div>
</div>
<button ng-disabled="signin_form.$invalid || !userloginbtn" ng-model="signin" ng-click="userSignin()" type="submit" class="btn btn-primary">Submit</button>
</form>
</modal>
</div></body></html>
Now i can show the popup when click on sign in button. When i submit the form i couldn't get the values of email and password values from the pop up form in controller. what is my mistake of using the scope. Please any one help me.
With a quick overlook, it seems a silly mistake. Change your lines
From
angular.module('mint', ['ngAnimate', 'toastr']);
To
angular.module('mintmygold', ['ngAnimate', 'toastr']);
You are using scope: true which means your directive is creating a child scope and inheriting the properties from its parent.
Therefore any property you define in the directive scope does not exists on you controller scope.
Changing form name=signin_form
for form name=$parent.signin_form or scope: false should fix the problem
I didn't test this though. And it's not a good solution.
I would probably create a service that launches the pop-up and returns a promise that gets resolved/rejected accordingly.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, modal) {
$scope.launch = function(){
modal.show().then(function(user){
console.log(user)
}, function(err){
console.log(err)
});
}
});
app.factory('modal', ["$document", "$compile", "$rootScope", "$templateCache", "$timeout", "$q",
function ($document, $compile, $rootScope, $templateCache, $timeout, $q) {
var $body = $document.find('body');
return {
show: function(){
var defer = $q.defer(),
child = $rootScope.$new();
child.user = {};
child.close = function(){
defer.reject('canceled');
tpl.remove();
}
child.submit = function(){
defer.resolve(child.user);
tpl.remove();
}
var tpl = angular.element($templateCache.get('modal.html'));
$compile(tpl)(child);
$body.append(tpl);
return defer.promise;
}
};
}]);
index.html
<script type="text/ng-template" id="modal.html">
<div class="modal in" style="position: static; display: block">
<div class="modal-dialog">
<form ng-submit="submit()" class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Email: <input ng-model="user.email"></input><br>
Password: <input ng-model="user.password"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()">Close</button>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
</div>
</div>
</script>
<button type="button" ng-click="launch()" class="btn btn-primary">Show modal</button>
Plunker
This is just a proof of concept. I think is enough to get you started. I'd strongly recommend to checkout UI Bootstrap and the way the implement their modal
I am new at AngularJS and I am trying to figure out how to add and delete notes to the setup that I have created. I have tried a lot of different things but I cant figure out how to get it to work.
I have cleaned up my code so it should be easier to figure out.
Please take a look at the jsfiddle version or snippet of my code:
'use strict'
var app = angular.module('plunker', ['ui.sortable']);
app.controller('MainCtrl', function($scope) {
var i;
$scope.itemsList = {
items1: [],
items2: []
};
for (i = 0; i <= 5; i += 1) {
$scope.itemsList.items1.push({
'Id': i,
'Label': 'Item ' + i
});
}
$scope.sortableOptions = {
containment: '#sortable-container',
accept: function(sourceItemHandleScope, destSortableScope) {
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
}
};
});
.as-sortable-item,
.as-sortable-placeholder {} #sortable-container {} .touch-mover {
float: right;
padding: 3px;
margin-top: 5px;
}
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="https://rawgithub.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="sortable-container">
<div class="form-actions">
<div class="input-append">
<form>
<input class="span3" size="16" type="text" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="">
Add Note
</button>
</form>
</div>
</div>
<div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
<div ng-repeat="item in itemsList.items1" class="simpel-fighter-input" as-sortable-item>
<input class="category-form textboxid" type="text" name="input" ng-model="item.Label" placeholder="Deltager1">
<div as-sortable-item-handle class="touch-mover">MOVE ME</div>
<a ng-click="" href>
<div class="touch-mover">DELETE</div>
</a>
<input class="category-form textboxid" style="float:right" type="text" name="input" ng-model="item.Label2" placeholder="Deltager2">
</div>
</div>
</div>
</body>
</html>
For adding a note just insert into your controller MainCtrl this function:
$scope.addNote = function() {
$scope.itemsList.items1.push({"Id" : $scope.itemsList.items1.length, "Label": "Item " + $scope.itemsList.items1.length})
}
and edit your form (add ng-model to input and ng-click function to button) like:
<input class="span3" size="16" type="text" ng-model="noteText" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="addNote()">
Add Note
</button>
For deleting use in you controller something like
$scope.deleteNote = function(index) {
$scope.itemsList.items1.splice(index,1)
}
and attach this function to the tag "DELETE" like
ng-click="deleteNote($index)"
I hope this helps.