I have following code:
<ul class="dropdown-menu">
<li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
<li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
</ul>
I am switching classes if the value is selected. I would like to add an event on icon (which is only visible when its is selected), however, whenever I click on the icon, two ng-click's are triggered. My question is: how can I disable the ng-click on the parent element, when the row is selected?
You need to add $event.stopPropagation() to your inner ng-click:
<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>
This will prevent the ng-click on the parent element from being called.
When you write and event in a DOM element, it's invocation bubbles up to call event attached to all it's parent till HTML tags.
You can prevent this occurrence by preventing the event to propagate further. stopPropagation does exactly that. You can find, details here https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
In your, unselect function, you can call like this
function unselect(event) {
event.stopPropagation();
// Your original code
}
Related
I am using angular package angular-xeditable the problem is I want to call its event onaftersave after i edit the label here is my html:
<h4 >{{ title.key || 'empty' }}
<span onaftersave="save()" editable-text="title.key ">
<i class="fa fa-pencil-square-o" "></i></span>
</h4>
the event onaftersave is called even if i click on the edit button and also while typing in the field
what I want is to call the event only when I click the button
Try to use this code this will helps to prevent function call.
<span>
<a onaftersave="save();" data-ng-model="title.key" e-placeholder="Your text" editable-text="title.key">
<span>{{title.key || 'empty'}}</span>
</a>
</span>
I am creating menu using angularJS. I need to add or remove class while click
my code shown below
<i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home
I need to add and remove class (fa-spin) based on active value. But the above code was not working.
Following is the correct syntax:
<i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home
Suggestion
Better use UI-router instead of making menu manually. UI-router has directives like ui-sref-active which will automatically add active class to active menu and remove from rest of the menu items
Try this:
[ngClass]= "[active == 'home' ? 'fa-spin' : '']"
Use ngClass (See documentation: https://docs.angularjs.org/api/ng/directive/ngClass)
The general syntax for the ng-class directive is as follows:
ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}"
Therefore, your code should look like:
<i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i>
I have the $scope object (array of objects) like this
$scope.parts = [];
(content of $scope.parts is changing during 'run-time', not just filled once per page load)
Later, it some custom directive i show those parts in such manner:
<li ng-repeat="part in parts">
<span>{{part.name}}
<i class="fa fa-check"
tooltip="some tooltip"
...
</i>
</span>
</li>
According to some logic, i want to change 'fa-' class and tooltip text.
I can do it like this
<i class="fa"
ng-class="haveDescr(part.name)"
//and in directive's controller
$scope.haveDescr = function (partName) {
return someCondition ? 'fa-check' : 'fa-question-circle';
};
and so on for the tooltip, and... for every attribute i want to change?
Is there a better way, than to write a scope "check-function" for every attribute? How can i trigger changes in every single part/property of $scope.parts and do the DOM changes described above? What is the right "angular way" for this? Or, maybe it is possible to 'intercept' ng-repeat action and do everything there?
You can use ng-class with an 'object' expression.
<i class="fa" ng-class="{'fa-check' : part.name, 'fa-question-circle' : !part.name}">
You can use ng-class and title
<i ng-class="{'fa-check':showFaCheck(part.name), 'fa-question': !showFaCheck(part.name) }" title="{{getTooltip(part.name)}}"/>
Fiddle http://jsfiddle.net/4PYZa/303/
I have a ngRepeat element that has a delete button that triggers a confirmation message. I'm trying to make the confirmation message show with a dynamic expression like so:
<div ng-repeat="item in items">
<a ng-click="delete(item_id)"></a>
<span ng-class="{'show':'delete_'+item._id}">Are you sure you want to delete your review? </span>
</div>
Unfortunately I can't get the expression 'delete_'+item._id to show up in the ngClass directive. Can someone please offer a solution?
Using ng-class="{'show': 'delete_' + item._id}" will add the class show whenever the expression 'delete_' + item._id' evaluates to true (which is always). You probably want to have an expression next to show which is true when the user has clicked the a tag, i.e. ng-class="{'show': userWantsToDelete(item)}".
Additionally, if you want to add the class 'delete_' + item._id to the element, you can use angular expressions with class attribute, i.e., class="{{'delete_' + item._id}}" on the element.
try this one.
<a ng-click="delete = !delete">delete</a>
<span ng-class="{show: delete}">Are you sure you want to delete your review? </span>
if you want to show one delete confirmation message of last clicked <a>
In view
<a ng-click="delete(item._id)">delete</a>
<span ng-class="{show: item._id==delete_id}">Are you sure you want to delete your review? </span>
In controller
$scope.delete = function(id) {
$scope.delete_id = ($scope.delete_id == id) ? !id : id;
}
I'm using Angular UI Router and I have a very simple:
<a href='#' ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
My function looks like:
$scope.toggleCollapse = ->
alert 'here'
console.log $scope.isCollapsed
$scope.isCollapsed = !$scope.isCollapsed
However, for some reason, my
$rootScope.$on '$stateChangeStart', (event, next, nextParams) ->
console.log event
gets triggered when I click the link. Is there any way to prevent it from triggering the $stateChangeStart?
this is because you have href='#' tag.
<a ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
remove href that and it wont trigger route change