Toggle visibility of html elements using angular js - javascript

I have created a html dom structure like this. I have used the ng-click to toggle the visibility of the DOM structure. For example if I am clicking in menu1 and if it is not visible it will be make visible. This is working perfectly . But I came across a scenerio where I need to close menu2(if it is open) on clicking menu1 & vice versa. Is is possible to accomplish using ng-click & ng-show
<span ng-click ="menu1 = !menu1">
<div ng-show="menu1">
//Rest of DOM element
</div>
</span>
<span ng-click ="menu2 = !menu2">
<div ng-show =menu2>
//Rest of DOM element
</div>
</span>

Below I will provide you a sample. I have provided two button, by clicking on each button it hide and show its respective content
HTML :
<body ng-app="ngToggle">
<div ng-controller="myAppCtrl">
<button ng-click="toggleCustom()">Custom</button>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
<button ng-click="toggleCustom2()">Custom</button>
<span ng-hide="custom2">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom2">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
</div>
</body>
And JS:
angular.module('ngToggle', []).controller('myAppCtrl',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
$scope.custom2 = true;
$scope.toggleCustom2 = function() {
$scope.custom2 = $scope.custom2 === false ? true: false;
};
}]);

<span ng-click="menuToggle(1)">
<div ng-show="menu1">...</div>
</span>
<span ng-click="menuToggle(2)">
<div ng-show="menu2">...</div>
</span>
And in controller (or inline inside ng-click but you'd be better off having it in the controller (or directive depending on your code structure))
$scope.menuToggle = function(menu) {
$scope.menu1 = (!$scope.menu1 && menu === 1);
$scope.menu2 = (!$scope.menu2 && menu === 2);
};
If I understand your question correctly, you want this scenario:
When component/page/whatever is loaded, nothing is open (or you could set a default by settings '$scope.menu1 = true;' in controller). Then, if you would press menu1 span, menu1 would open. If you then press menu1 again, it would close. If you instead press menu2, menu1 is closed and menu2 opened.
In the future, try to be a bit more descriptive with your questions. Hope it works out!

Related

ui not reflecting proper class upon toggle click

I have a toggle button and after wiring it up i noticed that when i click on it - the style doesn't change unless i refresh the page.
Here is my Html:
<div (click)="onValueChange(item)">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-toggle-switch" [ngClass]="{'active': item.isActive}">
<input type="checkbox">
<span class="status-on">on</span>
<span class="status-off">off</span>
</label>
</div>
</div>
What do i have to do to ensure that upon click the active class is added or removed properly without having to refresh?
Here is my on click function:
private onValueChange(item: ItemType) {
item.isActive = !item.isActive;
this.save(item);
}

AngularJS & jQuery - How to find the ID of a child div on a Click event for its parent?

I have code in HTML like:
<div id="edit" ng-click="editFunction($scope)">
<span id="1">
click1
</span>
<span id="2">
click2
</span>
<span id="3">
click3
</span>
<span id="4">
click4
</span>
....
</div>
In controller.js:
myDIV.controller('control',function($scope){
$scope.editFunction($event){
alert($event.target.id);
}
});
When a user clicks on the div tag, he should click on any of the span tags. Using the code we are able to get the div id.
However, I need to know which span is clicked. Meaning, the ID of that span.
By sending $index, you get the number of the element in the current repeat.
So instead of trying to send an event, and then understand from that what span was clicked, just use the tools that angular gives you out of the box.
HTML
<div id="edit">
<span ng-repeat="click in clicks" ng-click="editFunction($index)">
{{ click }}
</span>
</div>
And then in your controller:
myDIV.controller('control',function($scope){
$scope.clicks = [1, 2, 3, 4]; // Fill the array with real data.
$scope.editFunction(index){
alert(index);
}
});
U can use like this
<div id="edit" ng-click="editFunction($event)">
element.target.attributes.id.value

AngularJS - Hide parent div on click, then display next div

I'm trying to use Angular to write a page where I have a form divided into multiple sections, and only one form section is displayed at a time. When clicking the button at the bottom of the section, the current section is hidden and the next form section in the HTML is displayed -- so on and so forth for many sections.
Here's my code so far:
HTML:
<form>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
CSS:
/* hide all form sections */
.form-section {
display:none;
}
/* display first form section */
.form-section:first-child {
display:initial;
}
.next {
cursor:pointer;
}
I'm pretty new at Angular so I'm pretty lost as to how to achieve this.
So to get you started (besides the google link I originally put) this is a super basic example showing one way on how to show and hide divs using angular. If I was making an actual app, I would probably use routes for this part, but for sake of simplicity I didn't. This could get you started in the right direction.
https://jsfiddle.net/t76e8gt9/
HTML
<div ng-app="MultiStep" ng-controller="FormController">
<h1>
Step {{currentStep}}
</h1>
<div ng-if="currentStep == 1">
<label>Name</label>
<input type="text" placeholder="Name"/>
</div>
<div ng-if="currentStep == 2">
<label>Email</label>
<input type="email" placeholder="Email"/>
</div>
<div ng-if="currentStep == 3">
<label>Gender</label><br>
<labe>Male</labe><input type="radio" value="male" name="gender" /><br>
<label>Female</label><input type="radio" value="female" name="gender" />
</div>
<button ng-click="nextStep()">Next</button>
</div>
JS
var app = angular.module('MultiStep', []);
app.controller('FormController', function($scope) {
$scope.currentStep = 1;
$scope.nextStep = function() {
$scope.currentStep++;
}
});
Please, still look at some of the multistep tutorial
You need to call function on the anchor tag using angular ngClick. In that just change the $scope variable value true or false.
<div ng-controller="MainCtrl">
<form>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('First')">NEXT</a>
</div>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('Second')">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
</div>
app.controller('MainCtrl', function($scope) {
$scope.firstForm = true;
$scope.secondForm = false;
$scope.showForm = function(param) {
switch(param){
case 'First':
$scope.firstForm = true;
$scope.secondForm = false;
break;
case 'Second':
$scope.firstForm = fale;
$scope.secondForm = true;
break;
default:
$scope.firstForm = true;
$scope.secondForm = false;
break;
}
}
});
Depends on what you mean by hide, you can either use ng-if or ng-show/ng-hide to selectively display stuff on screen.
ng-if will not render the DOM whereas ng-show/ng-hide will use CSS to set it's display as none.
You can have something like:
<form>
<div class="form-section" ng-if="condition == 'div1'">
<!-- input fields -->
<!--Some way to change value of condition-->
<a class="next" ng-click="showDiv('div2')">NEXT</a>
</div>
<div class="form-section" ng-if="condition == 'div2'">
<!-- input fields -->
<a class="next" ng-click="showDiv('div3')">NEXT</a>
</div>
<!-- more "form-section" divs -->
And have a JS function to change value of condition.
$scope.showDiv = function(divName) {
$scope.condition= divName;
}

AngularJS popover: hide popover template on mouse out

I am using AngularJS' ui-bootstrap module. Here's my markup:
<button class="btn btn-default btn-sm" type="button"
popover-template="dynamicPopover.templateUrl"
popover-trigger="click" id="custom_overview"
popover-placement="bottom">Custom</button>
Here's my controller:
$scope.dynamicPopover = {
templateUrl : '../static/templates/popup-templates/datepicker.html'
};
Here's my popover template:
<div class="row" id="datepicker-container">
<div class="col-sm-12 clearfix">
<div class="col-sm-12">
<span class="heading">From:</span>
<input ng-model="timedata.fromDate" type="text" id="fromDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="fromOpen.isOpen" ng-click="fromOpen.isOpen = true" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-12" style="margin-top:5px">
<span class="heading">To:</span>
<input ng-model="timedata.toDate" type="text" id="toDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="toOpen.isOpen" ng-click="toOpen.isOpen = true" placeholder="dd-mm-yyyy">
<div class="error"
ng-show="timedata.toDate <= timedata.fromDate && timedata.fromDate && timedata.toDate">
<span>'To' date cannot be less than 'From' date.</span>
</div>
</div>
</div>
<div class="col-sm-12" id="submit-button">
<button class="btn btn-primary" ng-click="setInterval('custom')"
ng-disabled="timedata.toDate <= timedata.fromDate || !timedata.toDate || !timedata.fromDate">
Submit
</button>
</div>
</div>
As you can see, I am populating a popover with a popover template which contains a form. Here's a screenshot:
This popover opens up when I click on the 'Custom' button. Now, I want this popover to hide when I take the mouse away from the template and the 'Custom' tab. How can I do it?
In short,
replacing popover-trigger="click" by popover-trigger="'mouseleave : click'" should work for you.
For more understanding,
As per uib-popover documentation, both popover open and close triggers will be enabled by default with the popover-trigger attribute(only if you want to close and open on same event).
For example:
popover-trigger="'mouseenter'" This by default should open the popover on mouseover and close the popover on mouseleave
popover-trigger="'click'" - This will show and hide on clicks
In your case(show and close on different events), popover-trigger attribute should contain both events in order to work.
popover-trigger="'mouseleave : click'" This should work. Here first and second values represents hide and show triggers respectively.

Click button to copy text to another div with angularjs

I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>

Categories