I have a table and I would like to add in-line editing to that table. I started with ng-grid, however, I decided that while it worked well, I was spending too much time trying to fix the styling so that it would match the overall theme of my website. I started fresh and am now using a plain old html table with angularjs behind the scenes for its awesome two-way-data-binding property.
Everything has been going smoothly except for the fact that I am stuck on trying to get inline editing to work with bootstrap-datepicker: http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter. The reason I am using this datepicker over the ui-bootstrap datepicker that xeditable says you should use is because it does not look or feel right in my website. Here is what the ui-bootstrap datepicker looks like http://jsfiddle.net/NfPcH/23/. I like the simple and plain look of the bootstrap datepicker.
Here is a plunker of a table with xeditable and date fields to try and edit PLUNKER
Using bootstrap-datepicker as an input field works fine, a custom directive is used to properly update the model:
editablegrid.directive('datepicker', function() {
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attrs, ngModelCtrl) {
$(function() {
var dp = $(element).datepicker({
format : 'MM dd, yyyy'
});
dp.on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
scope.$apply();
});
});
}
}
I changed the xeditable source code to use bootstrap-datepicker (see lines 78-84 of xeditable.js)
/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableBsdateNew',
inputTpl: '<input type="text" class="form-control form-control-inline input-sm" datepicker>'
});
}]);
, however the problem lies somewhere with xeditable and how it updates the model of the selected row.
xeditable works perfectly for editing text and dropdowns in-line, trying to integrate with bootstrap-datepicker is proving to be difficult.
If there is some other way to use in-line editing with bootstrap-datepicker, I would not be opposed to trying it out. I was thinking that if this didn't work, maybe something with ng-show and ng-hide might do the trick.
1 > Make sure you install two libraries
- angular-xeditable
- angular-bootstrap-datepicker
2> Create new directive
/* The New directive I've made for xeditable to use with the
bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory', function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableBsdateNew',
inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>'
}); } ]);
3> In HTML put something like:
<span editable-bootstrap-datepicker="yourDateModel" onbeforesave="validateBeforeSaveDate($data)">Date ...</span>
Try this:
dp.on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
scope.$apply();
scope.row.dueDate = e.format('MM dd, yyyy'); //<--- new line
});
Related
Trying to implement a textarea component with emoticons support while writing.
I want to be able to backup the original text (ascii chars only) while presenting the filtered/generated html outcome (with an angular emoticons filter) on a div.
My initial solution is to
<textarea ng-model="text" ng-change="..." ng-focus="..."></textarea>
<div ng-bind-html="text | myEmoticonsFilter"></div>
but I'm having trouble getting to the part of using a hidden textarea. Also, with this I wouldn't be able to mouse-select text and delete or copy/paste safely.
I also thought of using a <div contenteditable="true"> but ng-focus and ng-change wouldn't be handled.
Does anyone have any sugestion on how to continue this?
Edit 1: here is a jsfiddle with an attempt on what I'm doing. Up until now, able to replace the first occurrence, but the behavior remains erratic since that. I'm using a contenteditable directive for 2-way data binding and to filter the emoticon pattern.
Edit 2: regarding my statement saying that ng-focus and ng-change wouldn't be handled, that is not true - ng-focus works natively on <div contenteditable="true"> and ng-change will work as long as a directive is declared using the ngModel and setting the appropriate $modelValue and $viewValue (an example is provided in the jsfiddle in Edit 1).
The only way to do this in a consistently cross-browser manner is to use a WYSIWYG field that converts emoji to images.
There's a jQuery plugin jquery-emojiarea that does what you need, so you'd just need to create a directive that wraps this plugin and you're off to the races. Since it inputs into a hidden textarea with emoji syntax :smile: angular should have no difficulty binding.
Here's a working directive I threw together. http://jsfiddle.net/dboskovic/g8x8xs2t/
var app = angular.module('app', []);
app.controller('BaseController', function ($scope) {
$scope.text = 'This is pretty awesome. :smile: :laughing:';
});
app.directive('emojiInput', function ($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function ($scope, $el, $attr, ngModel) {
$.emojiarea.path = 'https://s3-us-west-1.amazonaws.com/dboskovic/jquery-emojiarea-master/packs/basic';
$.emojiarea.icons = {
':smile:': 'smile.png',
':angry:': 'angry.png',
':flushed:': 'flushed.png',
':neckbeard:': 'neckbeard.png',
':laughing:': 'laughing.png'
};
var options = $scope.$eval($attr.emojiInput);
var $wysiwyg = $($el[0]).emojiarea(options);
$wysiwyg.on('change', function () {
ngModel.$setViewValue($wysiwyg.val());
$scope.$apply();
});
ngModel.$formatters.push(function (data) {
// emojiarea doesn't have a proper destroy :( so we have to remove and rebuild
$wysiwyg.siblings('.emoji-wysiwyg-editor, .emoji-button').remove();
$timeout(function () {
$wysiwyg.emojiarea(options);
}, 0);
return data;
});
}
};
});
And usage:
<textarea ng-model="text" emoji-input="{buttonLabel:'Insert Emoji',wysiwyg:true}"></textarea>
If you want the editable field to convert text like :( as you type you'll need to fork that jquery plugin and modify it slightly to parse input text on change as well as on init. (like, a couple lines of code)
I am using angular-strap datepicker from http://mgcrea.github.io/angular-strap/##datepickers for my angularjs SPA project. when editing an existing record using ngModel two way binding, Angular doesn't detect the date field change and even if I force the form to save by updating another non date field, the new date is not updated in backend. Here is the related part in my html file:
<input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}"
data-date-format="MM-dd-yyyy"
data-ng-model="vm.formData.dateDecision"
data-ng-required="vm.decisionDateRequired"
bs-datepicker />
I do not do anything special in my js file. I am using breezejs for my data handling and it is working fine for other fields.
what am I doing wrong? Any help is appreciated.
I've had this same problem and I solved with a custom directive that updates the model when the bs-datepicker dispatches a blur event:
angular.module('moduleName').directive('updateModelOnBlur',
['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs) {
elm.bind("blur", function (event) {
scope.$apply(function () {
var model = $parse(attrs.ngModel);
model.assign( scope, elm.context.value );
});
});
}
};
}]
);
I know this is just a hack, and not a final solution for the problem. But, if you are stuck and want to keep going, sometimes a hack might be useful.
You can also include $filter service in the directive if you want to manipulate date format before updating model. ;)
I am trying to generate form dynamically and use validation at the same time. The problem that I have now is that the input attribute name='{{key}}' is not interpolated by the validation.
<div ng-repeat="options in formObject">
<input type='radio' ng-model='ranodm' name='{{key}}'>
</div>
I know that I should use ng-form if I want a dynamic form, however I am having hard time to understand it. I am adding my simple plnkr example of what I am trying to achieve. It would be nice if someone would show how to solve this using ng-form or other method.
http://plnkr.co/edit/faG89bmu18nNNODVRV3x
I found an answer from reading through this SO post: Dynamic validation and name in a form with AngularJS
I ended up using the dynamicName directive to work around this problem so I could use a UUID of as the name of the field. Here's a plnkr and the directive I used. I can't take credit for the directive, I found it on that other post.
http://plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn?p=info
myApp.directive('dynamicName', function($compile, $parse) {
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function(scope, elem) {
var name = $parse(elem.attr('dynamic-name'))(scope);
elem.removeAttr('dynamic-name');
elem.attr('name', name);
$compile(elem)(scope);
}
};
});
Go through following link this will help.
http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html
The two-way data-binding appears to be causing bad updates to the field. Clicking on the field raises the datepicker fine, but if you attempt to edit the field by directly typing in a date, it doesn't quite work.
Here's the fiddle demonstrating the issue: http://jsfiddle.net/vSNJF/
<input type="text" ng-model="name" ui-date-format='m/d/yy' ui-date>
Compare the keyboard-editing under Angular to the standard jquery UI date picker behavior here: http://jqueryui.com/datepicker/
How can I make ui-date delay updating the model until after the interactive calendar is dismissed?
You've got quite a big directive there, I am not sure if anyone is going to go through the whole code to find what is causing the problem. To help I will leave a simpler datepicker directive that behaves exactly like Jquery UI's but without all the features you have implemented in yours, maybe if your start from this point and go adding features it would be easier to debug the problem.
The directive is:
directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'dd/mm/yy',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
}
});
Here is a Plunker and a blog post about it.
I am very new to Angular and have a specific use case in mind
I have a form which has two fields - Name and datetime.
The name is ng-model but datetime is not since it is not part of Angular and is a jquery component
What I want to do?
Here is the plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview
a.) I want to associate date to ngModel like ngModel="transaction.date"
b.) validate it as required using Angular way
Something which will look like (much like Angular)
<input type="text" name="transactionDate" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" required>
Why?
a.) To to things Angular way
b.) It makes model more consistent to test, validate
I asked this question on Stackoverflow and it was recommended to use custom directive, can someone give me direction with example how to do it?
Please guide me further since I am not able to validate it currently
Thank you very much
Based on Ketan's answer, I had to write a new directive and associate the value form jQuery to ng-model, which then is validated with form. The directive looks like
app.directive('dateTime', function(){
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel){
if (!ngModel) {
console.log('no model, returning');
return;
}
element.bind('blur keyup change', function() {
console.log('datetime changed: ', $('.form_datetime input').val());
scope.$apply(read);
});
read();
function read() {
ngModel.$setViewValue(element.val());
}
}
}
});
The plunker can be found here
Assuming you know how to write directives, you need to use the NgModelController inside your directive and use the $setViewValue(value) method. (See example the below page).
http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
This has to be called from your custom Datepicker event which triggers when the user completes the selection.