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>
Related
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>
I am trying to create a simple chat room web app. I am trying to bootstrap a modal to angular to include a create new room button. I followed the documentation and followed the sample code but when I tried to run it, the modal would not open. What am I missing? Here is the template and controller.
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
})
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
Try
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$scope.open=function(){
angular.element('#myModal').modal('show');
};
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div id="myModal" class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="open()">New Room</button>
$uibModal dependency needs to be injected into ModalCtrl controller, like this:
angular
.module('blocChat')
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
where
function ModalCtrl($uibModal, Room) {
//...
}
Example
(function () {
function ModalCtrl($uibModal, Room) {
var $modal = this;
//this.newRoom = Room.addRoom();
$modal.open = function () {
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
});
};
}
angular
.module('blocChat', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.factory('Room', function () {
return {
addRoom: function () {
console.log('add room');
}
};
})
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="blocChat" ng-controller="ModalCtrl as $modal">
<script type="text/ng-template" id="app/templates/modal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</script>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
</div>
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>