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>
Related
I need show, hide using two buttons. my requirement is,
when click -> Button A , it should be hide, Button B should be show
when click -> Button B , it should be hide, Button A should be show.
i am tying to do it with some other conditions. please check my code.
<button class="btn btn-primary btn-flat pull-right"
ng-if='(detailCustomter.clientCustomer.customerFlag===false) && accessRights.includes("FLAG_CUSTOMER")'>
<i class="ion ion-flag"></i> Button A
</button>
<button class="btn btn-danger btn-flat pull-right"
ng-if='(detailCustomter.clientCustomer.customerFlag===true ) && accessRights.includes("UNFLAG_CUSTOMER")'>
<i class="ion ion-flag"></i> Button B
</button>
if you can do this using ng-if attribute, that's good.
You can have a variable that represents the current condition and change it's value to the opposite on click.
Of course you will need to adjust the condition to your application.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.condition = true;
$scope.toggle = function() {
$scope.condition = !$scope.condition;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<button class="btn btn-primary btn-flat pull-right"
ng-click="toggle()"
ng-if="condition">
<i class="ion ion-flag"></i> Button A
</button>
<button class="btn btn-danger btn-flat pull-right"
ng-click="toggle()"
ng-if="!condition">
<i class="ion ion-flag"></i> Button B
</button>
</div>
</div>
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 would like to use a dropdown menu with AngularJs where I can open a pop up for adding extra item in a Single Page Application.
Is there such a chance in AngularJs ?
How can I achieve this?
(example)
Do you need something like http://plnkr.co/edit/LYOEntdgLbONNAzH0Ove?p=preview
Define a modal template for each value - modal1, modal2, ..
<script type="text/ng-template" id="modal1.html">
<div class="modal-header">
<h3 class="modal-title">modal1 - {{ action }}</h3>
</div>
<div class="modal-body">
modal1
</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>
and this function
$scope.showModal = function(action) {
if (!$scope.modes.mode) return
$scope.action = action
$scope.modal = $uibModal.open({
templateUrl: $scope.modes.mode+'.html',
scope: $scope
});
}
You call showModal from the button ng-click handlers (action is just to demonstrate the template / button relationship)
$scope.delete = function() {
$scope.showModal('delete')
}
...
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>
I add angularjs and angularui to my project but it's appearing correctly. It looks like this http://postimg.org/image/vzq0uki3d/ . I don't understand why. My code is right and I'm pretty sure everything its set up correctly. The example.js file is in the root directory with the index.html file. Heres my code.
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-danger" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
example.js
angular.module('plunker', ['ui.bootstrap']);
var ButtonsCtrl = function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
};
I'm not too familiar with AngularUI. However, I don't think you have the ButtonsCtrl defined properly. You don't use it as a vary. I think you need something like this:
angular.module('plunker', ['ui.bootstrap'])
.controller('ButtonsCtrl', [ '$scope', function($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
}]);
See comments about defining ButtonsCtrl in global namespace. Working example : http://cdpn.io/HDegL