I have a row of buttons and want to initialize the first button as active (as the data associated with it is loaded in my controller's init function). The below HTML works great, but when I click the other two buttons the 'active' class remains on the first button. I want this button set as active on page load and then treated 'normally' (ie: if a different button is clicked remove active class from first button):
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-class="{active : isActive}" ng-init="isActive = true" type="button" ng-click="playerMap.clusterToggle(true)">Clustered</button>
<button class="btn btn-default" type="button" ng-click="playerMap.clusterToggle(false)">Unclustered</button>
<button class="btn btn-default" type="button" id="heatmap" ng-click="playerMap.heatmap()">Heatmap</button>
</div>
Should be simple as:
If you are using a loop then its even clean - just pass the index.
<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true" type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''" type="button" ng-click="toggleButton(isActive,2)">Heatmap</button>
Though this does not answer your initial question, here is a working solution (not very efficient I have to say):
HTML:
<div class='container' ng-controller="GoingStack">
<div switch class="button" ng-class="{'active-button': state}">1</div>
<div switch class="button">2</div>
<div switch class="button">3</div>
</div>
Script:
app.controller('GoingStack', ['$scope', function($scope) {
$scope.state = true;
}]);
var active = document.getElementsByClassName('button');
app.directive("switch", [function() {
return {
link: function(scope, element, attr) {
element.bind('click', function(e){
scope.state = false;
active[0].classList.remove('active-button');
element.addClass('active-button');
});
}
}
}]);
Related
I am trying to click on the button class "btn ActionBar__button", but there are 2 of them and it always clicks on the button that contains the title "Don't Click".
How can I click on the button with the same class, but has a different title?
I am trying to use this code:
var elems = document.getElementsByClassName('btn ActionBar__button'); elems[0].click();
Here is the HTML:
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
You can use .querySelector
let elem = document.querySelector('[title="Click on this button"]');
console.log(elem)
elem.click();
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
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 am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!
Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.
I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps
I have two buttons. One where i clone a div (button-add) and one where I remove a div (button-remove).
I want to disable the remove-button when I only have one div.
So for multiple divs, it looks like this:
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox"></div>
<div class="copybox"></div>
<div class="copybox"></div>
...and when there's only one div, I want it to look like this:
<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button>
<div class="copybox"></div>
I use jQuery 1.11.3
Here you go. Hope this is what you need.
$('.btn').on('click',function(){
if($(this).text()=="+1")
{
$('.button-remove').prop('disabled',false);
$('div.copybox:first').clone().appendTo('body');
}
else
{
$('div.copybox:last').remove();
}
$('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
Try using the $("div.copybox").length that DontVoteMeDown commented and then set an ID for the button remove. Once you do that, you can add a function to hide the button with this code.
document.getElementById(buttonID).style.display = 'none'
If later you decide to enable it again, then you can also add another if statement and then the code for that would be block instead of none
<ul class="nav nav-pills tabscount">
<li ng-repeat="section in submissionCtlr.submissionForm.sections" ng-class="{ active:submissionCtlr.isSelected(section.sectionId) }" > {{section.sectionName}}</li>
</ul>
<input type="submit" value="Submit" style="display:none" class="btn btn-primary" ng-click="submissionCtlr.submitForm()" ng-disabled="submitForm.$invalid">
this.tab=1;
this.selectTab = function(setTab){
var tabcount = $scope.submissionCtlr.submissionForm.sections.length;
if(this.tab != tabcount){
this.tab++;
}else {
}
On click next button i got count, at the end of li count need to submit. submit should be display and next should be display: none. how can i acheive in anugularJs.
You can use ng-show to tell that if the current tab(tab) is the same as the total number of tabs(submissionCtlr.submissionForm.sections.length).
<input type="submit" value="Submit" ng-show="submissionCtlr.tab==submissionCtlr.submissionForm.sections.length" class="btn btn-primary" ng-click="submissionCtlr.submitForm()" ng-disabled="submitForm.$invalid">
For modifying the DOM elements in angularjs. The proper way is to create a directive and access the element in that directive.
For example -
<button class="btn btn-primary" ng-click="submit()" on-submit> Submit </button>
JS:
angular.module('myApp')
.directive('onSubmit', ,function() {
return {
restrict: 'A',
link: function($scope,el) {
$scope.submit = function() {
el[0].css("display", "none"); //change the css here accordingly.
}
}
};
});
You can also add the class like
element.addClass('myclass');