Am developing an application in angular js and using ui.router.
I would like to hide certain buttons based on a given state.
I have implementend the click event which navigates to the selected state, and i would like when a button has been clicked and is active to be hidden and reappear when the state is not active
I have tried
HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
On the controller
$scope.viewAssigned = function () {
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$state.go("dash.call.new");
}
How can i alter my controller code to hide and show these buttons using ng-show
You'll need to add information about the state to the controller, through something like $scope.state = $state.current.name
From there, you can use that in an ng-show or ng-if.
You can do this,
<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>
you should have added $state in $rootScope, for this to work.
Inject $state, $rootScope and place this in your app's run block.
$rootScope.$state = $state;
You can use a $scope variable to track the state change.look at the below code
$scope.viewAssigned = function () {
$scope.viewnew = true;
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$scope.viewnew = false;
$state.go("dash.call.new");
}
And your HTML code should be like this,
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
You can see when the $state is changing and hide that buttons. On your run() you can use a function similar to this:
myApp.run(function ($rootScope, $state) {
$rootScope.viewnew= false;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'myState') {//toState variable see the state you're going
$rootScope.viewnew = false;
} else {
$rootScope.viewnew = true;
}
});
});
then add this to your buttons:
<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
so when your $state change it would hide or show it.
Related
I am new to AngularJS and could really use some help. I have a button that's shown below that is part of a form. I need to show a modal when the form is submitted if the button is not clicked. How can I perform this check? I have tried several things with no luck.
<button ng-repeat="car in cars" btn-checkbox-false
class="btn btn-default btn-block text-left"
ng-click="AddRemoveCar(cars)">
<i ng-show="carInStock(cars)"
class="fa fa-check pull-right btn-success btn btn-xs" />
<i ng-show="!carInStock(cars)"
class="fa fa-plus pull-right btn-warning btn btn-xs" />
{{car.Model}}
</button>
Consider using the UI-Bootstrap uib-btn-checkbox directive for your Twitter Bootstrap checkboxes.
The uib-btn-checkbox directive, makes a group of Twitter Bootstrap buttons behave like a set of checkboxes.
Then your submit function can check the state of the model as bound with the ng-model directive.
For more information, see
UI-Bootstrap API Reference - Buttons
The DEMO1
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('ButtonsCtrl', function ($scope) {
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.$watchCollection('checkModel', function () {
$scope.checkResults = [];
angular.forEach($scope.checkModel, function (value, key) {
if (value) {
$scope.checkResults.push(key);
}
});
});
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<link href="//unpkg.com/bootstrap#3/dist/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo" ng-controller="ButtonsCtrl">
<h4>Checkbox</h4>
<pre>Model: {{checkModel}}</pre>
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left"
uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle"
uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right"
uib-btn-checkbox>Right</label>
</div>
</body>
I would be setting up some flag on the button click and check that value on form submit.
In my controller define a variable like btnClickedFlag = false;
In Button click function:
AddRemoveCar(cars) => {
this.btnClickedFlag = true;
}
Now on form submit , you can just check if btnClickedFlag is true if not display your modal/dialogue/overlay on screen.
This question already has answers here:
How to call a method defined in an AngularJS directive?
(13 answers)
Closed 4 years ago.
Someome, please tell me how can I access a javascript directive link function from a typedScript controller. I have a button outside the directive and I want to call that function in my pageController when my user button is clicked. I´ve tried several tutorials but i can´t have it working.
1-This is an extract of th directive.js file
I want to call the function from my controller
directive.js - javascript
(function () {
'use strict';
angular.module('pdf', []).directive('ngPdf', ['$window', function ($window) {
return {
restrict: 'E',
templateUrl: function (element, attr) {
return attr.templateUrl ? attr.templateUrl : 'app/_infrastructure/pdfViewer/viewer.html';
},
scope: {
pdfUrl: '='
},
link: function (scope, element, attrs) {
var url = scope.pdfUrl;
scope.goPrevious = function () {
if (scope.pageToDisplay <= 1) {
return;
}
scope.pageToDisplay = parseInt(scope.pageToDisplay) - 1;
scope.pageNum = scope.pageToDisplay;
};
}
};
}]);
})();
2-This is the directive template (.hmtl)
<nav class="text-center">
<div class="prev-next-button previous">
<button class="btn btn-danger btn-sm" ng-click="goPrevious()">
<i class="fa fa-arrow-left fa-lg"></i>
</button>
</div>
<div class="prev-next-button next">
<button class="btn btn-danger btn-sm" ng-click="goNext()">
<i class="fa fa-arrow-right fa-lg"></i>
</button>
</div>
<span>Pág: </span>
<input type="text" class="searchPageNumber" min="1" ng-model="pageNum">/
<span>{{pageCount}}</span>
<button class="btn btn-danger btn-sm" title="Diminuir" ng-click="zoomOut()">
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-danger btn-sm" ng-click="fit()">
100%
</button>
<button class="btn btn-danger btn-sm" title="Aumentar" ng-click="zoomIn()">
<i class="fa fa-plus"></i>
</button>
</nav>
<hr style="border-top: 0px; margin-bottom: 0px!important;margin-top: 1px!important" />
<div style="max-height:900px;max-width:1051px;overflow: auto;">
<canvas id="pdf" style="border:2px solid #000000;"></canvas>
</div>
3- This the user page (.html)
<div class="main-content-inner" ng-controller="MyController as Ctrl">
<div class="col-xs-8" >
<div class="form-group" ng-show="(Ctrl.currentProcesso.estadoProcessoId==1 || Ctrl.currentProcesso.estadoProcessoId== 3 ||Ctrl.currentProcesso.estadoProcessoId==6) && Ctrl.appUserBasicInfo.role == 'Escrivão'">
<ng-pdf data-pdf-url="file.pdf" canvasid="pdf" scale="page-fit" page="1"></ng-pdf>
</div>
</div>
<div class="col-xs-3">
<button class="btn btn-success btn-sm btn-next"
ng-click="Ctrl.controllerMethodToCallDirectiveFunction()"
ng-show="true">
NEXT
<i class="tcicons-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</div>
4-Finally this is my controller (MyController.ts)
public enumerarProcessoPushPop = (): boolean => {
//I want to call the directive method here
return true;
}
Methods inside Angular directives are not meant to be called. From the Angularjs documentation:
At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
I have a button:
<button ng-click="deleteCompany(company.id)"
class="btn btn-danger"
onClick="return window.confirm('This will permernently delete the entity\n
Are you sure you want to delete this post?'); ">
<span class="glyphicon glyphicon-trash"></span>
</button>
I also have an angular function:
$scope.deleteCompany = function(id){
console.log(id);
}
When i click cancel in the confirm the console outputs:
1
When i click ok in the confirm the console outputs:
1
I want the angular code to execute when the "Ok" is pressed but not when the "Cancel" is pressed.
JSFiddle example: http://jsfiddle.net/4304ewu5/
Throw your confirm inside the $scope.deleteCompany() function:
function MyCtrl($scope) {
$scope.deleteCompany = function(id) {
if (confirm('This will permernently delete the entity\nAre you sure you want to delete this post?')) {
$scope.name = id;
// delete the stuff.
}
}
}
And remove it from the inline HTML:
<div ng-controller="MyCtrl">
<button ng-click="deleteCompany('1')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button ng-click="deleteCompany('2')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Hello, {{name}}!
</div>
Fiddle: http://jsfiddle.net/0Laztrfk/
Why don't you put the confirm within your deleteCompany method?
$scope.deleteCompany = function(id) {
if (!confirm("Delete company?"))
return;
console.log(id);
}
I want to add a class to the i tag after clicking of button. how can I achieve this using angular js.
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up"></i>
</button>
$scope.countLikes = function (e) {
console.log(e);
}
I wanted output like this. Added exampleClass to the i tag
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up exampleClass"></i>
</button>
use ng-class directive
<i class="fa fa-thumbs-o-up" ng-class="{'exampleClass' : buttonClicked}"></i>
$scope.countLikes = function (e) {
$scope.buttonClicked = true;
console.log(e);
}
when buttonClicked is true i element will get the exampleClass css class
<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
<i class="fa fa-thumbs-o-up" ng-class="{'exampleClass': isClick}"></i>
</button>
$scope.isClick = false;
$scope.countLikes = function (e) {
$scope.isClick = true;
}
Here is my answer
<button type="button" title="Like" class="btn btn-compare" ng-click="(myLike = myLike === 'fa-thumbs-o-up' ? 'fa-thumbs-up' : 'fa-thumbs-o-up'); countLikes(product.title)";>
<i class="fa" ng-class="myLike"></i>
</button>
$scope.myLike = "fa-thumbs-o-up";
Hi I have annoying problem. I am trying to add two methods to $scope. And I am doing this right this:
function typeCtrl ($scope, $timeout) {
$scope.addType = function(){
requestHelper.addType();
};
$scope.removeType = function(number){
alert("asdasdsad");
requestHelper.removeType(number);
};
};
And I am trying to call it this way:
<button id="addType" class="btn btn-primary glyphicon glyphicon-plus" ng-click="addType()"></button>
<button id="removeRequest" class="btn btn-danger glyphicon glyphicon-minus" ng-click="removeType(1)"></button>
A method addType() works correctly but angular not see removeType() method. Can you tell me whay I am doing wrong. Thanks for replies.
Can it be because of no end-bracket on first button?