I have a problem with angularJs.
After open the pop-up and dynamically add a button on the pop-up, I don't know how to trigger an button event.
I tried almost 'everything'.
Here is an example: https://plnkr.co/edit/QfnDttJE2OnfHzt65tBQ?p=preview
ok given your code, it could be improved a bit but this should be solid solution:
https://plnkr.co/edit/UiOsyHBjVZTW33yr6h3z?p=preview
Javascript:
app.controller('ModalInstanceCtrl', function ($uibModalInstance,$compile) {
var $ctrl = this;
$ctrl.buttonArray = [];
$ctrl.cancel2 = function () {
$uibModalInstance.dismiss('cancel');
};
$ctrl.add2 = function(){
$ctrl.buttonArray.push('message' + $ctrl.buttonArray.length)
};
$ctrl.message = function () {
alert('Message');
};
});
HTML:
<div ng-app="app" ng-controller="postoviCtrl as $ctrl">
<script type="text/ng-template" id="modalOdabraniPost.html">
<div class="modal-body">
<p>Header</p>
<hr/>
<button class="btn btn-sm" type="button" ng-click="$ctrl.add2()">Add</button>
<div id="content">
<button ng-repeat="btn in $ctrl.buttonArray" class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.message()">{{btn}}</button>'
</div>
</div>
<div class="modal-footer">
<button class="btn btn btn-primary" type="button" ng-click="$ctrl.cancel2()">Close</button>
</div>
</script>
Open
</div>
Related
I am using the iu.bootstrap.modal popup window on one of my views. The modal windows displays correctly except that it looks like it is inside a larger white frame.
What is causing this white frame to appear behind my modal window?
Here is my view:
<button type="button" id="btnModal" name="modal1" ng-click="openModal()" class="btn btn-primary pull-right">Open Modal</button>
<!--Modal-->
<script type="text/ng-template" id="myModal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<span id="error-message" class="text-danger" style="white-space:pre">{{message}}</span>
</div>
<div class="modal-footer">
<button id="btn-ok" class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</div>
</script>
And my controller
$scope.openModal = function () {
var title = "Modal Title";
var message = "Modal Message";
var modalInstance = $uibModal.open ({
animation: true,
templateUrl: 'myModal.html',
size: 'sm',
controller: function ($scope) {
$scope.title = title;
$scope.message = message;
$scope.ok = function () { modalInstance.dismiss() };
}
});
};
What causes the window to appear behind the modal?
In ui.bootstrap documentation (https://angular-ui.github.io/bootstrap/#/modal)
<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">
<ul>
<li ng-repeat="item in $ctrl.items">
{{ item }}
</li>
</ul>
Selected: <b>{{ $ctrl.selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
There is not a <div> of modal-content class. But you have at the beginning of the modal. The modal-content is a css Bootstrap class and it may cause the problem.
I have three buttons:
<button class="btn btn-success">Save</button>
<button class="btn btn-success">Send</button>
<button class="btn btn-success">Close</button>
I want to know how to hide button with conditions?
<button ng-show="ShowSave" class="btn btn-success">Save</button>
<button ng-show="ShowSend" class="btn btn-success">Send</button>
<button ng-show="ShowClose" class="btn btn-success">Close</button>
here ShowSave, ShowSend, ShowClose will be Boolean which will be set in your controller
$scope.ShowSave = true;
If above is true it will display button and in case of false it hide your button.
Now you can check it as condition also like
<button ng-show="ShowSave == true" class="btn btn-success">Save</button>
or if you are assigning some string value like 'display' then it will be like
<button ng-show="ShowSave == 'display' ? true : false" class="btn btn-success">Save</button>
You can use ng-show and ng-hide or even ng-if.Lets see an example on how we can use these directives in your case.For instance we want to show save button & remove send button only after sending something and if user clicks on close button we don't want to display both save and send buttons,then below is the sample code of how they should be used.
In your HTML
<button class="btn btn-success" ng-if="showBtns" ng-show="showSave" ng-click="save()">Save</button>
<button class="btn btn-success" ng-if="showBtns" ng-hide="showSave "ng-click="send()">Send</button>
<button class="btn btn-success" ng-click="close()">Close</button>
In your JS
$scope.showSave = false;
$scope.showBtns = true;
$scope.send= function(){
$scope.showSave = true;
};
$scope.close = function(){
$scope.showBtns =false;
}
Here is article on when to use ng-show/ng-hide and ng-if.Hope this helps you !
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<button type="submit" class="btn btn-primary" ng-disabled="isDisabled" ng-click="save()">Test</button>
<button type="submit" ng-hide="firts" class="btn btn-danger">Firts</button>
<button type="submit" ng-hide="Second" class="btn btn-info">Second</button>
</div>
</body>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.isDisabled = false;
$scope.Second = true;
$scope.save = function () {
$scope.isDisabled = true;
$scope.firts =true;
$scope.Second = false;
};
});
</script>
</html>
I have a Angular Strap popover that contains form elements:
<button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind">
<span class='glyphicon glyphicon-plus'></span>
</button>
I load that into the first popover
<button type="button" "class="btn btn-default" bs-popover data-auto-close="1" data-html="true" data-content="{{popoverContent}}" data-animation="am-flip-x" title="1st popover">
Button label
</button>
using:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", "$compile", function ($scope, imageHierarchyRepository, $templateCache, $compile) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
$scope.popoverContent = $templateCache.get("popoverTemplate.html");
};
}]);
})();
However the second popover doesn't show up, and I'm guessing that it has something to do with compiling the raw html string into the first popover. How do I correctly compile the contents of a popover in AngularJS?
I'm not sure if this will answer your question, but here's an example of how to show a popover within a popover using templates:
<button type="button" class="btn btn-primary" bs-popover data-title="primary popover" html="true" data-template-url="popoverTemplate.html">Primary popover</button>
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<button type="button" class="btn btn-default" bs-popover data-title="inner popover" html="true" data-template-url="popover2Template.html">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</script>
<script type="text/ng-template" id="popover2Template.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<form class="popover-content">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control"/>
</div>
</form>
</div>
</script>
in angularstrap documentation controller can be a function. but there is no example for this ability.
I am using this code for creating and display a modal using angularStrap:
$scope.openCheckDialog = function(){
var checkModal= $modal({title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller:function(){
console.log("show first log to me!!!");
this.test = function(){
console.log("show other log to me") ;
}
}});
checkModal.$promise.then(checkModal.show) ;
};
and it is my modal template script:
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind="title"></h4>
</div>
<div class="modal-body" ng-bind="content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="test()">Save</button>
</div>
</div>
</div>
</div>
when I open this dialog first log is shown in console but when I click on save button no thing happen.
How about this?
var checkModal= $modal({
title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller: ['$scope', function($scope){
$scope.test = function () {
console.log("show other log to me");
};
}]
});
In AngularJS, I have multiple buttons that let people filter a page.
What is the conventional way to detect a button click in Angular and set the value of $scope.filter_value to the value of the button?
Should I be attaching ng-click to everything, or is there a better way?
jsfiddle: http://jsfiddle.net/9u1aqq24/
HTML
<main ng-app="myApp">
<section ng-controller="myController">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="console.log('CLICKED');">
Frontend
</button>
<button type="button" class="btn btn-default" data-role="backend developer">
Backend
</button>
<button type="button" class="btn btn-default" data-role="full stack developer">
Full Stack
</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</section>
</main>
JS
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
$scope.filter = null;
}]);
ng-click is a natural way of handling clicks in Angular. However, for your problem you might consider radio- or checkbox- buttons. You can find such components for example in Angular-Bootstrap.
Use just ng-click="somefunction(parametr)"
and after that in your controller
$scope.somefunction = function(parametr)
{
....
}
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.setFilter = function(type) {
// you can put all your logic here ($http.get.. or whatever)
$scope.filter = type;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
<button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
<button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</div>
</body>
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.setFilter = function(type) {
// you can put all your logic here ($http.get.. or whatever)
$scope.filter = type;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
<button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
<button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</div>
</body>