I have a button:
<button data-ng-click="toggleElement(asset)" class="btn"><span class="text-center">Add To Cart</span></button>
I would like to hide this button when this element will add in a list and show
a disable button with the title "Added to Cart"!!
I tried it :
<table class="table" data-ng-show="elements!=null && elements.length>0">
<tr data-ng-repeat="element in elements">
<td>
<button data-ng-click="toggleElements(element)" ng-disabled="isDisabled" ng-model="isDisabled" class="btn"><span class="text-center">Add To Cart</span></button>
<td> <button data-ng-click="toggleAsset(elements[$index])" data-ng-disabled="added" class="btn">{{added ? 'Added' : 'Add'}}</button>
</td>
</tr>
</table>
in my controller I have this :
$scope.toggleElements= function (element){
.....
$scope.added = true;
}
Somebody can help me...
I think this will work for you:
<button ng-click="toggleElement(asset)" ng-disabled="asset.added">{{asset.added ? 'Added' : 'Add'}}</button>
You'll need to set the property asset.added inside the toggleElement() method.
You can execute several instructions inside one ng-click directive.
Just separate them with ; like a normal javascript expression.
For example:
<button ng-click="doIt(); hide = true" ng-hide="hide">
click me!
</button>
here is one solution.
Have a look to the plunk
<button ng-repeat="a in [0,1,2]" data-ng-click="added = !added" class="btn" ng-disabled="added">
<span ng-show="!added" class="text-center">Add To Cart</span>
<span ng-show="added" class="text-center">Added To Cart</span>
</button>
Related
This question already has answers here:
Can I nest button inside another button?
(3 answers)
Closed 4 years ago.
I have this piece of HTML:
:
:
<td ng-if="Curr_State == 'Edit' && This_Page.Data_Changed == false" style="max-width:300px">
<button type="button"
class="FD"
ng-click="Initiate_Append_to_JobCard()"
style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
<font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
</font>
<font size="2">
{{This_Page.Append_Get_Number}}
<table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">
<tbody>
<tr>
<td>
<label for="Append_Number"> #:</label>
</td>
<td>
<input string-to-number
id="Append_Number"
type="number"
class="form-control"
ng-model="This_Page.Append_Number"
min="0"
step="1"
style="width:70px;margin:0px">
</td>
<td>
<button class="btn btn-success"
ng-click="Do_Append()"
title="Proceed with Append"
type="button">
<font size="2" color="white">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</font>
</button>
</td>
<td>
<button class="btn btn-danger"
ng-click="Cancel_Append()"
title="Cancel Append request"
type="button">
<font size="2" color="white">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</font>
</button>
</td>
</tr>
</tbody>
</table>
</font>
</button>
</td>
:
:
and the following two functions within the controller:
$scope.Initiate_Append_to_JobCard = function() {
$scope.This_Page.Append_Get_Number = "Y" ;
}
//////////////////////////////////////////////////////////////////
$scope.Cancel_Append = function() {
$scope.This_Page.Append_Get_Number = "N" ;
$scope.This_Page.Append_Number = null ;
}
When the outer button is clicked, $scope.This_Page.Append_Get_Number is set to "Y" and the inner objects are properly shown.
When the Cancel button is clicked, the function $scope.Cancel_Append is invoked, the value of $scope.This_Page.Append_Get_Number is set to "N" (first statement of the function) but this change is not propagated towards the HTML. In fact, I added {{This_Page.Append_Get_Number}} which shows initially N, then Y and it then remains unchanged no matter how many times I click on the cancel button.
<button type="button"
class="FD"
ng-click="Initiate_Append_to_JobCard()"
style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
<font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
</font>
<font size="2">
{{This_Page.Append_Get_Number}} </font></button>
<table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">
If the table should be inside the button itself, then the click event on the Cancel button will bubble up to the Append button, which will close and open again.
You need to add a
event.stopPropagation()
in your cancel function and also pass the $event to that function
Updated Plunker
https://embed.plnkr.co/CEHNggASaVGqkqfamdEx/
Event Bubbling
When you have an element inside another element and an event occurs on the innermost element (the click event here), then the event is processed by that element and then it is passed up the DOM hierarchy to all the ancestor elements that have a listener for that event and processed by each one.
Here you have a button inside a button, with click event listeners on both. When the inner button (Cancel) is clicked, the listener (Cancel_Append) processes the event (changes the value to N) and then passes the click to the parent/outer button where the listener (Initiate_Append_to_JobCard) processes the event and changes the value to Y again.
Since these happen at almost the same time, we cant see the difference. It can be seen by adding a 'console.log($scope.This_Page.Append_Get_Number)' to both the functions.
To prevent the bubbling of the event, we need to cancel the propagation after the event has been handled. So we need to pass the $event object from the HTML and then after the event is processed by the "Cancel_Append", we need to stop propagating the event further up the DOM using the event.stopPropagation().
Take a look at this link for a better understanding of event bubbling
What is event bubbling and capturing?
make use of ng-show instead of ng-if
<td ng-show="Curr_State == 'Edit' && This_Page.Data_Changed == false" style="max-width:300px">
I am using addeventatc. As per research i have to use addeventatc.refresh(); after page page loaded because i am using data from api call.It works if i put button on my screen. But not working with loading.
Here website https://www.addevent.com/add-to-calendar-button .
<tr ng-repeat="y in x.LEAVE_DAYS | orderBy:'LEAVE_DATE'">
<td>
<span ng-show="test" title="Add to Calendar" class="addeventatc">
<br />
<span class="start">{{y.LEAVE_START | date:'M/d/yy h:mm a'}}</span>
<span class="end">{{y.LEAVE_END | date:'M/d/yy h:mm a'}}</span>
<span class="timezone">US/Arizona</span>
<span class="title">Time Approved for {{x.REQ_TYPE}}</span>
<span class="description">Approved Hours : {{y.HOURS}}</span>
</span>
</td>
I tried as below its work. But i do want to fire this function after my table load on screen.
button type="button" class="btn btn-primary" ng-click="testing(); test=true">  Exports data</button>
controller
$scope.testing = function () {
addeventatc.refresh();
}
Try adding a timeout function
setTimeout(function(){
addeventatc.refresh();
}, 200);
I have a loop ng-repeat that displays sevral icons.
<div class="box">
<div class="box-body">
<div class="row" >
<div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="record in newlayout.display" align="center">
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
<span class="badge bg-yellow" style="font-size:22px;">{{record.numberOfSamples}}</span>
<i class="fa fa-{{newlayout.labStyle}}"></i> {{record.lab}}
</a>
</div>
</div>
</div>
</div>
My issue is that the second part of the binded variable itemValue should be dynamic
In my Js, I have this
newLayout.url = 'sublabs/?labName=';
newLayout.itemValue = 'record.lab';
The URL is dynamic.
When I click on the first displayed Icon, the url should look like this :
But it didn't work as I had a compilation error..
Does someone have an idea how to fix this:
http://localhost:8181/#/newlayout/sublabs?labName=PIA/C1 - Shiftlabo
Where the record value "PIA/C1 - Shiftlabo" change.
So basically here if I change
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
{{newlayout.itemValue}} by {{record.lab}} it would work..but the {{record.**lab**}} should be dynamic as it will have another value when I click on the icon. It will change to {{record.subLab}}
Thanks
Use property acccessor bracket notation inside the binding:
<div>{{record[labOrSublab]}}</div>
JS
var isSublab = false;
$scope.labOrSublab = "lab";
$scope.clickHandler = function() {
isSublab = !isSublab;
$scope.labOrSublab = isSublab ? 'subLab' : 'lab';
};
I have two states for a button, "State1" and "State2".
It defaults to "State2". When I click the button, it toggles to "State1".
When I click anywhere outside the button, I need it to change from "State1" back to "State2". This is my code:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" >
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
It sounds like you're just checking whether the element has focus. This is much easier than putting down a bunch of ng-click handlers all over your form just to toggle one input.
Use ng-focus and the corresponding ng-blur. If you use HTML elements that can have focus (like a <button>), you can use code like
<button type="button" class="btn"
ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }"
ng-focus="Ctrl.Check = true"
ng-blur="Ctrl.Check = false">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</button>
Demo on plnkr
So, I have some messages in the Firebase, with text, auther and like. I'm going over them with ng-repeat:
<li ng-repeat="message in messages">
and I wanted to add a button for diss/like the message. I tried all kind of stuff, none worked. I hope to find something that works like that:
<span ng-if="message.like"><button ng-click="message.$setValue({like: !message.like})">Disslike Message</button></span>
<span ng-if="!message.like"><button ng-click="message.$setValue({like: !message.like})">Like Message</button></span>
I also tried to pass the message to a function but also - didn't worked :\
The usual way to go about this is to call a controller function, using the $index magic variable (which represents the current item's index) – instead of storing functions on the object to modify itself:
<button ng-click="invertLike($index)">
And in your controller:
$scope.invertLike = function (index) {
messages[index].like = !messages[index].like;
};
I think u want to toggle between like and dislike button at runtime. See below to do that. JSFiddle for reference - Demo
Hope this helps!
<body ng-app="SampleApp">
<table ng-controller="myController" border="1px">
<thead>
<tr>
<td>text</td>
<td>author</td>
<td>like/dislike button</td>
</tr>
</thead>
<tbody ng-repeat="message in messages">
<tr>
<td>{{message.text}}</td>
<td>{{message.author}}</td>
<td>
<button ng-click="message.like = !message.like">
<span ng-show="message.like">Like Button</span>
<span ng-show="!message.like">Dislike Button</span>
</button>
</td>
</tr>
</tbody>
</table>
</body>
Okay, so I did some mix&match with Sumit & Ven's answers.
Thank you both!
In the html:
<button ng-click="message.like = !message.like; invertLike($index)">
<span ng-show="!message.like">Like Button</span>
<span ng-show="message.like">Dislike Button</span>
</button>
In the controller:
$scope.invertLike = function(index) {
$scope.messages.$save(index);
};