That's my problem: http://jsfiddle.net/2f6qscrp/311/
shortly: I've got a div that can be expandable and it reveals a new div. This kind of event must be in all div. So, in each section of this div I can open it (like an accordion). The problem is that if i click one of the buttons on this div (they must be there) the div opens. I would avoid this thing if possible. Is it possible?
<div ng-app='home'>
<!-- App goes here -->
<md-content md-scroll-y flex layout="column" class="_md ng-scope layout-column flex" layout-padding ng-controller="MainCtrl as mainCtrl">
<div layout="column" md-scroll-y>
<div layout="row" ng-click="showDetailsFunction();" class="div-outline-none div-cursor-pointer">
<h3 flex class="div-card-panel-title">
Blablablabla
</h3>
<span flex></span>
<ul flex class="div-doc-act div-flex">
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn1');">
btn1
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn2');">
btn2
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn3');">
btn3
</md-button>
</li>
</ul>
</div>
<div data-ng-if="showDetails" class="animate-if">
<div>
wevniwernviurevnier
</div>
</div>
</div>
</md-content>
</div>
Angular part
angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);
angular.module('home').config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('grey');
});
angular.module('home').controller('MainCtrl', function ($scope, $window) {
$scope.showDetails = false;
$scope.showDetailsFunction = function() {
$scope.showDetails = !$scope.showDetails;
};
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert($scope.greeting + " " + greeting);
};
});
you can try using event.stopPropagation(); method to avoid the div opening on the button click.
$scope.(your div name) = function($event) {
$event.stopPropagation();
// Some code to find and display the next image
}
Related
I've been trying for days and I'm in desperate need of help because it's the last thing I need to do for my thesis.
I have a an index.html page with a stepper and a graph inside:
<html>
<style>
#stepperTwoLabs {
display: none;
}
#stepperThreeLabs {
display: none;
}
</style>
<head>
<title>Training</title>
<meta name="description">
<meta charset="utf-8">
<link rel="stylesheet" href="assets/architecturetree/css/tree.css" />
</head>
<body>
<div id="graph"> <!-- View the graph-->
<h1><i class="fa fa-book"></i> Training</h1>
<p> </p>
<div id="stepperTwoLabs">
<div class="stepp2">
</br></br></br>
<md-card ng-init="step2.disabled = true; step3.disabled = true; selected = 0">
<md-steppers md-selected="selected" md-stretch-steppers="always">
<md-step label="Lab1" md-complete="step1.completed">
<md-content>
<iframe id="iframe0" name="myIframe0" frameborder="5" width="1500" height="1500"></iframe>
<md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled = false">NEXT</md-button>
</md-content>
</md-step>
<md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
<md-content>
<iframe id="iframe1" name="myIframe1" frameborder="5" width="1500" height="1500"></iframe>
<md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
<md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
</md-content>
</md-step>
<md-step label="End" md-complete="step3.completed" ng-disabled="step3.disabled">
<md-content>
<h1>
All done!
</h1>
<h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
</h5>
<md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
<md-button class="md-raised md-primary" ng-click="step2.disabled = true; step3.disabled = true; selected = 0">START</md-button>
</md-content>
</md-step>
</md-steppers>
</md-card>
</div>
</div>
<div id="stepperThreeLabs">
<div class="stepp3">
</br></br></br>
<md-card ng-init="step2.disabled = true; step3.disabled = true; step4.disabled = true; selected = 0">
<md-steppers md-selected="selected" md-stretch-steppers="always">
<md-step label="Lab1" md-complete="step1.completed">
<md-content>
<iframe id="iframe2" name="myIframe2" frameborder="5" width="1500" height="1500"></iframe>
<md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled=false">NEXT</md-button>
</md-content>
</md-step>
<md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
<md-content>
<iframe id="iframe3" name="myIframe3" frameborder="5" width="1500" height="1500"></iframe>
<md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
<md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
</md-content>
</md-step>
<md-step label="Lab3" md-complete="step3.completed" ng-disabled="step3.disabled">
<md-content>
<iframe id="iframe4" name="myIframe4" frameborder="5" width="1500" height="1500"></iframe>
<md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
<md-button class="md-raised md-primary" ng-click="selected = 3; step3.completed=true; step4.disabled=false">NEXT</md-button>
</md-content>
</md-step>
<md-step label="End" md-complete="step4.completed" ng-disabled="step4.disabled">
<md-content>
<h1>
All done!
</h1>
<h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
</h5>
<md-button class="md-raised md-primary" ng-click="selected = 2">PREV</md-button>
</md-content>
</md-step>
</md-steppers>
</md-card>
</div>
</div>
</body>
</html>
The stepper is initially hidden but when I click on a node of the graph inside it, it becomes visible and is loaded with several labs to be carried out.
The code portion inside the .js is as follows:
(the click function is launched with the .on event (click, click) using d3.js)
var click = function (d){
document.getElementById('stepperTwoLabs').style.display='none';
document.getElementById('stepperThreeLabs').style.display='none';
if(d.parent.name == 'Buffer Overflow' || d.parent.name == 'Password Cracking' || d.parent.name == 'Denial of Service' ||
d.parent.name == 'Privilege Escalation' || d.parent.name == 'Web Hacking' ) {
vm.numlab=d.children.length;
if (d.children.length==2) {
document.getElementById('stepperTwoLabs').style.display='block';
for(var i=0; i< d.children.length; i++) {
var lab=d.children[i].name;
$('#iframe'+i).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
}
} else if (d.children.length==3) {
document.getElementById('stepperThreeLabs').style.display='block';
for(var i=0; i<d.children.length; i++) {
var lab=d.children[i].name;
var j=i+2;
$('#iframe'+j).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
}
}
}
}
// Double click to scroll down in the page up to the stepper
var dblclick = function (d) {
if (d.children.length==2) {
$('html,body').animate({
scrollTop: $(".stepp2").offset().top}, 'slow');
}
else if (d.children.length==3) {
$('html,body').animate({
scrollTop: $(".stepp3").offset().top}, 'slow');
}
}
If it is the first sequence of steps and therefore the first click, everything is fine because the stepper is loaded for the first time. The problem arises when I click a new node of the graph to load another set of labs to be carried out because the stepper starts from the end, or rather from the step at which I had stopped previously. . What I would like is to make sure, perhaps by updating the content of the stepper in the index.html, that we can start from the first step every time a node of the graph is clicked.
EDIT: When I start another laboratory it starts from the end because these are loaded in the stepper (always the same of the index.html) and the state in which it is left is that of the last step. I could start from the beginning by inserting a button like this: <md-button class = "md-raised md-primary" ng-click = "step2.disabled = true; step3.disabled = true; selected = 0"> START < / md-button> but the problem is that this has to be done by clicking on the node and I can't do anything about it (at least I think). basically I know why this happens and to solve it you will only have to refresh a part of html.
Thanks!
I am a very beginner to AngularJS,I have a bootstarp modal with 2 tabs I have made it to display only one tab at a time.In the modal I have two buttons NEXT and PREVIOUS I am able to switch between the tabs through these buttons.But the issue is the content in their respective tabs wont change when I change the tab.Where am I going wrong.Kindly help me.
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>{{current.data}}</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<textarea class="form-control" ng-model="first" name="first" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
<div class="tab-pane" id="tab2">
<textarea class="form-control" ng-model="second" name="second" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
</div>
</div>
Controller.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dataSet = [
{ data: "First", index: 0 },
{ data: "Second", index: 1 }
],
$scope.current = $scope.dataSet[0],
$scope.next = function() {
var i = $scope.getIndex($scope.current.index, 1);
$scope.current = $scope.dataSet[i];
},
$scope.previous = function() {
var i = $scope.getIndex($scope.current.index, -1);
$scope.current = $scope.dataSet[i];
},
$scope.getIndex = function(currentIndex, shift) {
var len = $scope.dataSet.length;
return (((currentIndex + shift) + len) % len)
}
});
I have updated your code with the ng-class attribute for your selected data kindly refer https://jsfiddle.net/jasonantho/fwowg8q5/
Is it possible to remove md-disable-backdrop attribute from HTML ?
The md-sidenav md-disable-backdrop attribute is not added when i open the side navigation. The i make a selection from the form i just displayed in the side navigation and now i want to add the md-disable-backdrop attribute to the md-sidenav
<md-sidenav md-component-id="right" class="md-sidenav-right md-whiteframe-4dp" md-disable-backdrop id="rightSideNav">
Here you go - CodePen
If you inspect the md-sidenav element you will see the md-disable-backdrop attribute toggled. Note: this won't toggle the backdrop, which is what I suspect you actually want.
Markup
<div ng-controller="AppCtrl" layout="column" ng-cloak="" ng-app="MyApp">
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight($event)" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav id="mySideNav" class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-content ng-controller="RightCtrl" layout-padding="">
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
<md-button ng-click="toggleMdDisableBackdrop()">Toggle md-disable-backdrop</md-button>
</md-content>
</md-sidenav>
</div>
JS
angular
.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function ($scope, $mdSidenav, $element) {
$scope.mdDisableBackdrop = false;
$scope.sideNav = angular.element($element[0].querySelector('#mySideNav'));
$scope.toggleRight = function() {
$mdSidenav('right')
.toggle()
.then(function () {
});
}
})
.controller('RightCtrl', function ($scope, $mdSidenav) {
$scope.close = function () {
$mdSidenav('right').close();
};
$scope.toggleMdDisableBackdrop = function () {
if ($scope.mdDisableBackdrop) {
$scope.sideNav.removeAttr('md-disable-backdrop');
}
else {
$scope.sideNav.attr("md-disable-backdrop", "true");
}
$scope.mdDisableBackdrop = !$scope.mdDisableBackdrop;
};
});
I am pretty new to AngularJS and I am using Angular Material and Dialog precisely the Custom Dialog to show a popup dialog.
Now I am able to show the Dialog, but the problem is that I am not able to show a dropdown inside of the dialog's <md-dialog-content> tag.
I show the dialog when I click a button. The minimized code which I copied from the links I added above:
$scope.onClicked = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'app/html/printDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen
})
.then(function(answer) {
$scope.status = 'You said the info was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
}
Now the printDialog.html (which is also copied and file name changed to full my needs):
<md-dialog aria-label="Print Report">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
The toolbar or headers
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
All the contents goes here
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
All the dialog actions goes here
</md-dialog-actions>
</form>
Now, how do I show a drop down selectable list with a default selected item inside of this dialog.
Any help would me much appreciated.
Here's a very simple example - CodePen
Markup
<div ng-controller="MyController as vm" id="popupContainer" ng-cloak="" ng-app="app">
<md-button class="md-primary md-raised" ng-click="vm.open($event)">
Open
</md-button>
<script type="text/ng-template" id="printDialog.html">
<md-dialog aria-label="Print Report">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
The toolbar or headers
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content" layout="column">
All the contents goes here
<md-input-container>
<label>Select Beatle</label>
<md-select ng-model="chosenOption">
<md-option ng-repeat="option in options" ng-value="option">
{{option}}
</md-option>
</md-select>
</md-input-container>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
All the dialog actions goes here
</md-dialog-actions>
</form>
</md-dialog>
</script>
</div>
JS
angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('MyController', function($scope, $mdDialog) {
this.open = function(ev) {
$mdDialog.show(
{
templateUrl: "printDialog.html",
clickOutsideToClose: true,
controller: DialogController,
});
};
function DialogController($scope, $mdDialog) {
$scope.options = ["john", "paul", "george", "ringo"];
$scope.chosenOption = "ringo"; // default
$scope.$watch("chosenOption", function (newValue) {
if (angular.isDefined(newValue)) {
console.log(newValue);
}
});
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
}
})
I am using panel bootstrap accordion.
When we click anywhere, on panel head will collapse panel body
but there is one inline span element with click event
so,i need to prevent collapse in class of panel body and i need to trigger span click event.
my approach:
for this,
I used $event.stopPropogation()
html
<div class="panel-group" id="accordion2">
<div class="panel" ng-repeat="uniqueId in uniqueIds">
<div class="panel panel-heading" data-toggle="collapse" data-parent="#accordion2" data-target="#{{uniqueId}}">
<span>{{uniqueId}}</span>
<span class="pull-right" ng-click="fnShowJdTrack()">Track JD</span>
</div>
<div id="{{uniqueId}}" class="panel-collapse collapse">
<div class="panel-body">
<!-- content here -->
</div>
</div>
</div>
</div>
ctrl
$scope.fnShowJdTrack = function() {
$event.stopPropagation();
//some other action here
};
You need to pass the $event object to the function.
<span class="pull-right" ng-click="fnShowJdTrack($event)">Track JD</span>
And in your controller:
$scope.fnShowJdTrack = function($event) {
$event.stopPropagation();
//some other action here
};
See this answer: https://stackoverflow.com/a/20301030/863110
For example:
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.stop = true;
$scope.outerClick = function(){
alert('outer');
};
$scope.innerClick = function($event) {
if ($scope.stop) {
$event.stopPropagation();
}
alert('inner');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label><input type="checkbox" ng-model="stop" /> stopPropagation</label>
<div ng-click="
outerClick()">
<div ng-click="innerClick($event)">Inner div</div>
</div>
</div>