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);
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 using file input of jasny-boostrap in AngularJS in a Modal, so I also used the jasny-bootstrap-angular. I am having two doubts about:
When I Click on the button to open the model, I am able to select then file I want. If I select a file e close the model, when I open again the model, the file will be in data-preview, it it not cleaning up. I want pass null value (or reset) this image preview (fileinput-preview thumbnail) in my angularjs when I click in my button to open the modal;
If a click in a button that call a modal, I want to automatic get the image from my web service to the data-previw and automatic change the buttons to 'remove' and 'change' and I get a picture to service.
My HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select a image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" file-model="fileinput"> <!--compose.myFile-->
</span>
Remover
<button class="btn btn-info" ng-click="showInput()">Show Input</button>
</div>
</div>
And if I click on 'show input' I can see the image binary, I used this angularjs:
$scope.showInput = function () {
console.log($scope.fileinput.result);
}
I am using this HTML code with my angularjs to see the image from web service and it is everything work perfect:
<!-- Foto view-->
<div class="form-group">
<img ng-show="equipamento.FotoEquipamento != null" style="height:auto; width:225px;" data-ng-src="{{getImage(equipamento.FotoEquipamento)}}" />
</div>
jasny-bootstrap-angular is UPDATED.
Please check it out.
Now it supports event handlers also.
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>
I was surprised about the icon wasn't shown when I'm put the attribute translate in the button with glyphicons (no glyphicons is fine!!).
My index.html
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My app.js
app.config(function ($translateProvider) {
$translateProvider.translations('th', {
HEAD: {
CART: 'ตะกร้า'
}
});
$translateProvider.translations('en', {
HEAD: {
CART: 'Cart'
}
});
$translateProvider.translations('cn', {
HEAD: {
CART: '大車'
}
});
});
It's OK for the menu, but the button not displaying bootstrap-glyphicons but also show wrong position of label as in the following image.
Right now, I have not enough reputations to post image, I draft you a layout the menu and the cart button like this
menu --> Product | Webboard | Payment | About us [ (Cart) Cart ] <---- button (EN)
menu --> สินค้า | เว็บบอร์ด |การชำระเงิน| เกี่ยวกับเรา [ (ตะกร้า) Cart ] <---- button (TH)
I hope it can display bootstrap-glyphicons and the label is shown in appropriate position something like
[ icon (0) ตะกร้า ] or [ icon (0) Cart ]
The problem is that the directive translate="HEAD.CART" from angular-translate replaces the innerHTML of the element that is being applied to, thus you lose the <span class="glyphicon"></span> inside the button.
A workaround is to use another span as translate directive on a inner element, inside of the wrapping element. For instance:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal">
<span class="glyphicon glyphicon-shopping-cart"></span>
({{ROLineList.length}}) <span translate="HEAD.CART"></span>
</button>
This approach has a better performance than using the filter, because it doesn't set any additional watchers (see the docs).
You might also consider using variable replacement when you have inline values.
Update!! I've changed from using attribute
translate="HEAD.CART"
in to use {{'HEAD.CART' | translate}} instead.
my old code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My new code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" >
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) {{'HEAD.CART'| translate}}
</button>
Finally, It works great right now.
Thanks.
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>