is there a way to translate the button in the angular ui-datepicker in this plunker example.
I tried adding close-text="{{\'lblClose\' | translate}}" current-text="{{\'lblToday\' | translate}}" clear-text="{{\'lblClear\' | translate}}" like the other Angular ui-datepicker but it's not working.
any help is really apreciated
you can do it just by updating the directive like this <div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" close-text="closeText" current-text="curentText" clear-text="clearText"on-open-focus="false" disabled/></div>
Please see this plunker for result
After looking more deeply on how ui-grid-datepicker is working I found a dirty solution (I don't think there is a clean solution)
You can see a plunker here where I changed the text of the close button:
http://plnkr.co/edit/za99R9wUOcM2s2EkHLsv?p=preview
THe problem is that the setting to change the Done button must be applied on the element that has the directive "uib-datepicker-popup"
So if you want to modify the label of the Done button you have to change the library of ui-grid-settings (which is not a good solution but I don't see any other way).
from this:
template: function(element, attrs) {
var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
return html;
},
You change it to (notice I added the close-text attribute with a paramter) :
template: function(element, attrs) {
var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" close-text="' + attrs.closeLabel + '" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
return html;
},
And then in your main file app.js, from this:
editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'
you change it to :
editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker close-label="' + closeLabelTranslated + '" row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'
The only thing remaining is to set your variable closeLabelTranslated to whatever you want, for instance using angular-translate module (I didn't add this to the plunker):
var closeLabelTranslated = $filter('translate')('DONE');
Like I said this is dirty solution but it seems ui-grid-edit-datepicker doesn't provide you with this option so you have to add it manually
Related
I'm trying to dynamically create my template as below:
template: '<div> <input type="checkbox" {{report-checkedvalue}} value="#:' + filterField + '#"/>#:' + filterField + '#</div>'
report-checkedvalue is my helper which returns checked or unchecked value for my checkbox input. But i can get it to work.I appreciate any help!
I don't know how things works in angularjs
But here is litle help i can
use conditional string for your template like
var isChecked = {{report-checkedvalue}} // true or false
var template = '';
if(isChecked){
template = '<div> <input type="checkbox" checked value="#:' + filterField + '#"/>#:' + filterField + '#</div>'
}
else {
template = '<div> <input type="checkbox" value="#:' + filterField + '#"/>#:' + filterField + '#</div>'
}
That will generate checked and non-checked checkbox in your html.
If you want to dynamically compile your template on client side, I suggest you to read this answer: Dynamically compile a HTMLBars template at runtime in Ember 2.5 based on this one.
But this is far from an Ember convention and you probably should avoid if it is not absolutely necessary.
I have a simple directive using isolate scope which passes data to a scoped method from within the template:
app.directive("phone", function () {
return {
scope: {
dial: "&"
},
template: '<input type="text" ng-model="value">' +
'<br>' +
'<div class="button" ng-click="dial({message:value})">' +
'Call home!</div>',
controller: function($scope) {
console.log($scope);
}
};
});
Works fine. But I'd like to clear the input field after the alert has been completed. I'm having a hard time figuring out how I can access ng-model="value" on that input that is generated from within the directive. Any help?
Here's a plunk for you
change the template to this
template: '<input type="text" ng-model="value">' +
'<br>' +
'<div class="button" ng-click="dial({message:value}); value = \'\' ">' +
'Call home!</div>',
note that ng-click is changed to ng-click="dial({message:value}); value = \'\' "
this will sets the value to empty string after calling the dial() function.
here is the demo
or you can try something this, but seems like first one is the better one.
I'm having two input text box.
I need to combine the values entered in two text boxes and display it in the third.
I'm able to display it if I use only the value in the third text box.
Box 1:
<input type="text" ng-model="entity.name">
Box 2:
<input type="text" ng-model="entity.code">
Box 3:Box1+Box 2
<input type="text" value="{{entity.name+ ' + ' + entity.code}}">
However if I use a model name in the third box, the logic doesn't seem to be working:
<input type="text" value="{{entity.name+ ' + ' + entity.code}}"
ng-model="entity.fullCode">
Can anyone suggest a fix ??
This is a good question as it illustrates how incorrect "thinking in Angular" can lead to issues.
With Angular you start with model first. Then the View is bound to the model and reflects it - not the other way around. What I mean by that is that ng-value would not set the model, although it would alter the view. You (or rather, the controller) is responsible for setting the model.
So, if you need entity.fullCode to equal the concatenation of entity.name and entity.code, then you should set it in the controller.
For example, if you wanted to set it any time entity.name or entity.code change, then you could do so with $watch:
$scope.$watch("entity.name + entity.code", function(newVal){
$scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
})
Note, though, that since you are binding entity.fullCode to another input, changing that input would change entity.fullCode and would not make it equal to the + of the first two.
<div ng-app>
<div>
<label>Name:</label>
<input type="text" ng-model="entity.name">
<label>Code:</label>
<input type="text" ng-model="entity.code">
<label>Full Code:</label>
<input type="text" ng-model="entity.fullCode" value="{{entity.fullCode=entity.name + ' + ' + entity.code}}">
</div>
</div>
You must assign something to your ng-model attribute, so that it can bind.
your code seems to be work. but just display purpose we do this.
cheers
You need to use $watch with true
function MyCtrl($scope) {
$scope.entity={name:'',code:'',fullCode:''};
$scope.$watch('entity',function(n,o){
$scope.entity.fullCode = $scope.entity.name + $scope.entity.code;
},true);
}
Fiddle:- http://jsfiddle.net/405qc0xg/
$scope.entity = [];
$scope.entity.name = "";
$scope.entity.code = "";
$scope.$watch("entity.name + entity.code", function(newVal){
if($scope.entity.name != "" && $scope.entity.code != ""){
$scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
}
else {
$scope.entity.fullCode = "";
}
})
you need to make use of $watch.
It keeps watch on mentioned obeject as soon as value of object change the function of $watch will be called and it will refresh $scope
for your code your need to write this:
$scope.$watch('entity.name',function(){
$scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
});
$scope.$watch('entity.code',function(){
$scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
});
I assume you're using controllerAs syntax and would suggest you do something like this in your controller:
entity.fullCode = entity.name + ' - ' + entity.code;
Then you can drop the value attribute and simply bind to the element via data-ng-model/ng-model.
Hope this helps you, please have a look into the plunker
http://plnkr.co/edit/oMUABphr6JcNEhCnCDKq?p=preview
$scope.obj = {first : '',second : ''};
$scope.$watch('obj', function(newval, oldval){
$scope.obj.third = $scope.obj.first + $scope.obj.second;
},true)
The above code says, when ever the object 'obj' changes, then the code inside the $watch will execute.
Your code should actually work. See this JSFiddle for a working demo.
<div ng-app>
<div>
<label>Name:</label>
<input type="text" ng-model="entity.name">
<label>Code:</label>
<input type="text" ng-model="entity.code">
<label>Full Code:</label>
<input type="text" value="{{entity.name + ' + ' + entity.code}}">
</div>
</div>
I transform FCKTAG to INPUT and attach dhtmlxcalendar. It works.
Directive works fine too.
But I need attach calendar to an input with an icon Initialization of dhtmlxCalendar Doc
Initialization of dhtmlxCalendar Doc: I must put in
<span><img id="calendar_icon" src="path.gif" border="0"></span>
In Angular Directive I put
template: '<input type="text" ng-model="g" ></input>' +
'<span><img src="http://clans.worldoftanks.ru/media/' +
'clans/emblems/cl_582/2582/emblem_24x24.png" border="0"></span>',
It's error. I need one root tag. I choose DIV:
template: '<div>' +
'<input type="text" ng-model="g" ></input>' +
<span><img src="http://clans.worldoftanks.ru/media/' +
'clans/emblems/cl_582/2582/emblem_24x24.png" border="0"></span>' +
'</div>',
Annnd... Calendar doesn't load.
I haven't any idea why it.
plunker without an icon
plunker with an icon DOESN'T WORK
In your link function you are get the input element using element[0]. Once you wrap all of it in a div tag it is no longer element[0]. Trying substituting the following code.
var input = element.find('input')[0];
if (myCalendar == null) {
myCalendar = new dhtmlXCalendarObject(input);
} else {
myCalendar.attachObj({input:input, button: input});
}
updated plunker
I'm trying using Durandal to show a message, but I can't get how to break line, so I'm getting all my info in one line.
Anybody can help with that?
HTML
if(bid.exposed){
var msg = 'Bidder details : ' +
"\n" + 'Business Name : '+ bid.businessName +
"\n" + 'Username' : ' + bid.fullName;
app.showMessage(msg, Expose, 'Confirm');
}
Try changing the /n to <br/> as you are dealing with html when you show the message.
if(bid.exposed){
var msg = 'Bidder details : ' +
"<br/>" + 'Business Name : '+ bid.businessName +
"<br/>" + 'Username' : ' + bid.fullName;
app.showMessage(msg, Expose, 'Confirm');
}
EDIT
Looking deeper at the code, the file scripts/durandal/dialog.js contains the code for the dialog box.
This is the code that generates the HTML for the dialog.
MessageBox.defaultViewMarkup = [
'<div data-view="plugins/messageBox" class="messageBox">',
'<div class="modal-header">',
'<h3 data-bind="text: title"></h3>',
'</div>',
'<div class="modal-body">',
'<p class="message" data-bind="text: message"></p>',
'</div>',
'<div class="modal-footer" data-bind="foreach: options">',
'<button class="btn" data-bind="click: function () { $parent.selectOption($data); }, text: $data, css: { \'btn-primary\': $index() == 0, autofocus: $index() == 0 }"></button>',
'</div>',
'</div>'
].join('\n');
The issue with how we were both trying to display the details is on the line
'<p class="message" data-bind="text: message"></p>',
According to the knockout.js Documentation on text binding, it will not render html elements.
There are a couple of options.
Create a Custom HTML Dialog template and a Custom Dialog js file.
Modify the Durandal dialog.js file (quick and easy to get you out of a tight spot but not recommended)
I think that the best course of action would be to create your own Dialog Template to display the information laid out how you want it. There are samples on how to do this in the (dfiddle) durandal samples.
Durandal Sample ZIP file
You can use my version of dialog.js, which I have requested to be pulled to the 2.1.0 branch, which is still under work. You can find my version of dialog.js at the following location:
https://github.com/TommiGustafsson/Durandal/blob/master/src/plugins/js/dialog.js
In that version, I have changed the text binding to html binding among many other improvements. Then, you can use <br /> tag or any other html in your message box. If you want to know about other improvements I have made, you can read about them in the following post:
https://github.com/BlueSpire/Durandal/pull/362