I have some javascript that I'm trying to convert into Angular:
$('.col-lg .fa-clock-o').click(function(e){
$(this).parent().toggleClass('set-time');
e.preventDefault()
});
I've tried adding the following to the child element containing the link, but it doesn't work, maybe theres a proper 'angular' way to do this instead?
A more 'Angular' way to do this would be to set a variable which represents whether or not the set-time class is present on the parent element. By default this would be undefined which is falsy.
Then to toggle it in your ng-click you can just set the value to be the opposite of what it currently is.
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
Here's a working example:
var app = angular.module('app', []);
.set-time {
background :red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
</div>
The following works, but not sure its the angular way:
HTML:
Controller:
public toggleTimepickerPopup(event : any) : void{
jquery(event.target).parent().toggleClass('set-time');
event.preventDefault()
}
Parent is not a function, it's a prototype:
Correct usage is:
$(this).parent
And your anchor element:
Related
I have a parent component that creates "n" child components within an ng-repeat. Each child component has an accordion element (from ui-bootstrap directives) in its template. From the parent component I would like to collapse or expand all accordions using a link in the parent component level. Each child accordion can be expanded/collapsed individually setting the local vm.isAccordionExpanded variable.
I am planning to use $scope.$broadcast() form the parent to notify the children, each of them will intercept the events with $scope.$on() and set a local boolean variable vm.isAccordionExpanded to open/close the accordion respectively.
Parent component template:
<span id="accordionListCommands" ng-if="vm.pastVisits.totalResults > 0">
<span id="collapseAllAccordion">
<a ng-click="vm.collapseAll()" href="">
<i class="fa fa-minus-square" aria-hidden="true"></i></a>
</span>
<span id="expandAllAccordion">
<a ng-click="vm.expandAll()" href="">
<i class="fa fa-plus-square" aria-hidden="true"></i></a>
</span>
</span>
<div ng-repeat="visitItem in vm.pastVisits.data">
<visits-list-component visit="visitItem"></visits-list-component>
</div>
Parent component js file:
$scope.$on('collapse-all-accordion', function () {
vm.isAccordionExpanded = false;
});
$scope.$on('expand-all-accordion', function () {
vm.isAccordionExpanded = true;
});
Child template:
<uib-accordion close-others="false">
<div uib-accordion-group is-open="vm.isAccordionExpanded">
//Rest of the template
Is there a better or more performant way to achieve this?
The way you are doing this is not right and its not the angular way to write it.
Instead use one way data binding or two way data binging:
bindings: {
visit: '<' // or ('=') respectivly
}
and then implement your collapseAll function like follows:
angular.forEach( vm.pastVisits.data,function(visitItem) {
visitItem.isAccordionExpanded = false;
});
then in the visit component you can write:
vm.$onChanges = function() {
if(changes.visit) {
vm.isAccordionExpanded = changes.visit.currentValue.isAccordionExpanded;
}
}
or even better without having to put $onChanges listener :
<uib-accordion close-others="false">
<div uib-accordion-group is-open="vm.visit.isAccordionExpanded">
I'm new in angularjs , I want to add a class to a <div> when the div is clicked, and then remove the class when I click on another <div> in my html file, how can i do that? I've tried many different ways, but can't solve the problem. For example, I've tried this.
<div class="mainMenu dashboard" ng-click="itemClicked($index);" ng-class="{ 'newMainMenu': $index == selectedIndex ,'newDashboard': $index == selectedIndex }">
<div class="closeElement" ng-click="itemClicked(-1)"></div>
and in controller i use this code
scope.selectedIndex = 0;
$scope.itemClicked = function ($index) {
console.log($index);
$scope.selectedIndex = $index;
}
another way that i test
<div class="mainMenu news " ng-click="flag = 1;" ng-class="{ 'newMainMenu': flag == 1 }">
how can I remove that class without using jquery?
If you are looking to implement a navigation menu, in the HTML
<ul class="menu">
<li ng-repeat="m in menus" ng-class="{selected:m==selectedItem}" ng-click="selectedItem=m">{{m}}</li>
</ul>
and in the the scope
$scope.menus = ["Home", "Contact", "Location"]
altough you didn't show all of your code, here's a simple example you can learn from:
you need to set a variable on the controller's $scope, set it to true/false when elements are clicked, and give the proper class to each element according to that variable's value
app.controller('DataCtrl', function($scope) {
$scope.status = true;
});
and in your html:
<div ng-controller="DataCtrl">
<form>
<button type="button" ng-click="status = !status" class="btn btn-lg" ng-class="{'btn-success' : status, 'btn-danger' : !status}">
1
</button>
<button type="button" ng-click="status = !status" class="btn btn-lg" ng-class="{'btn-danger' : status, 'btn-success' : !status}">
2
</button>
</form>
</div>
I found out where is my problem repeat the name of a controller isn't make a integrated scope I can not using a value with same name in that area i must just use controller name one time and put of code in one div
I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!
To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.
Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.
I have a span tag like below which call a function in the controller when clicked.
HTML
<div class="row" ng-repeat="event in events">
<div class="col-lg-1 text-center">
<span class="glyphicon glyphicon-trash" data={{event.id}} ng-click="deleteEvent()">
</span>
</div>
</div>
Controller
$scope.deleteEvent=function(){
console.log(this);
}
I need to get the value in data attribute in the controller function. I tried using this keyword and $event; neither one worked.
Please help.
Even more simple, pass the $event object to ng-click to access the event properties. As an example:
<a ng-click="clickEvent($event)" class="exampleClass" id="exampleID" data="exampleData" href="">Click Me</a>
Within your clickEvent() = function(obj) {} function you can access the data value like this:
var dataValue = obj.target.attributes.data.value;
Which would return exampleData.
Here's a full jsFiddle.
Try passing it directly to the ng-click function:
<div class="col-lg-1 text-center">
<span class="glyphicon glyphicon-trash" data="{{event.id}}"
ng-click="deleteEvent(event.id)"></span>
</div>
Then it should be available in your handler:
$scope.deleteEvent=function(idPassedFromNgClick){
console.log(idPassedFromNgClick);
}
Here's an example
Addition to the answer of Brett DeWoody: (which is updated now)
var dataValue = obj.srcElement.attributes.data.nodeValue;
Works fine in IE(9+) and Chrome, but Firefox does not know the srcElement property.
I found:
var dataValue = obj.currentTarget.attributes.data.nodeValue;
Works in IE, Chrome and FF, I did not test Safari.
I am trying to use ng-class and bind a class to an expression so, that I can unit test the expression binding. But, it seems that I am missing something.
The button:
<li><a class="" ng-click="onAddInterface()"><i class="icon-plus-sign"></i> add interface </a></li>
The panel that should collapse and expand:
<div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>
the function that is fired
$scope.onAddInterface=function(){
$scope.showCreateNewInterfacePanel=true;
}
anyway clicking the link nothing happens.
Am I missing something?
I'm not sure if this is how you are really defining your $scope.onAddInterface function or if it is just an example... Nevertheless you should be doing it like this:
$scope.onAddInterface = function() {
$scope.showCreateNewInterfacePanel = true;
}
update
Also make sure the link and the collapsible element are under the same $scope/Controller:
<div ng-controller="Ctrl">
...
<a ng-click="onAddInterface()">add interface</a>
...
<div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>
...
</div>
Controller:
function Ctrl($scope) {
$scope.onAddInterface = function() {
$scope.showCreateNewInterfacePanel = true;
}
}
I had a very similar problem and was able to solve this problem by placing 'in' in quotes. It is a string, and not a variable.
...
<div class="collapse" ng-class="{'in':showCreateNewInterfacePanel}"><div>
...