Integrating x-editable with AngularJS

[Sebastien ARBOGAST]

Has anybody tried to integrate x-editable (http://vitalets.github.com/x-editable/index.html) with AngularJS? I'm trying to do inline editing right now using pure angularjs with input fields that appear and stuff, but it certainly is a lot of code and I would love to make it simpler. On the other hand, x-editable seems to do a direct post to the server when a field is committed so I don't see how I could plug it in to an Angular controller function.

Is x-editable integration a viable option? Are there easier ways to do inline editing with AngularJS?

Best regards,

---
Sébastien Arbogast
http://sebastien-arbogast.com

[robby...@gmail.com]

Did you end up integrating x-editable and angular? I'm about to try to create a directive to integrate them and I was wondering if you had any tips or code to share. : )

-Robby

[Sebastien ARBOGAST]

I didn't manage to do it yet. Did you move forward with it?

---
Sébastien Arbogast
http://sebastien-arbogast.com

2012/12/23 <robby...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Sebastien ARBOGAST]

I had an interesting discussion with guys at angular-ui https://github.com/angular-ui/angular-ui/issues/324

And they came up with a neat directive. It seems to do the job so far.

---
Sébastien Arbogast
http://sebastien-arbogast.com

2012/12/26 Sebastien ARBOGAST <sebastien...@gmail.com>

[Mahbub]

Aah, i should have seen your post before making my fiddle http://jsfiddle.net/mahbub/XRL4U/ . 

[jmeco]

Do you also use angular form validation with x-editable ?

[Sebastien ARBOGAST]

Nope.

---
Sébastien Arbogast
http://sebastien-arbogast.com

2013/1/3 jmeco <jmay...@eco2market.com>

[Michael Calkins]

Only a small problem with it when the value of the data starts out empty it doesn't replace the empty text.

[Michael Calkins]

For some reason when you update an element that was empty by default the model would not update so I used element param and $.html to update it.

http://jsfiddle.net/XRL4U/8/

[Brian Bird]

Has anyone made any progress with this?  I spent the day looking into it, but unfortunately my Angular/JS skills are too limited to make any headway.  Hence, I've been using the previously posted: http://jsfiddle.net/XRL4U/8/

The only problem is that I'm attempting to pass optional parameters, but only certain ones seem to be function.  For instance, in the example below, data-showbuttons seems to have an effect, while the option data-showmeridian, does not.  Any ideas how I can get those additional parameters to be functional?

<a xeditable href="javascript:;"

                               id="item_date"

                               data-type="datetime"

                               data-pk="1"

                               data-name="item_date"

                               data-ng-model="item_date"

                               data-viewformat="dd M, yyyy"

                               data-placement="right"

                               data-placeholder="Required"

                               data-showbuttons="false"

                               data-showmeridian="true"

                               data-startdate="1370704561013"

                               data-original-title="Select event date."

                               class="editable editable-click">{{item_date | date:"dd M, yyyy"}}</a>

[Brian Bird]

I updated the JS Fiddle to use the Empty-Check only for non-dates:

http://jsfiddle.net/BirdInTheCity/5ASt3/2/

[ja...@ariveguru.com]

 
   Using Angualr Js with xeditable  for drop down field how to do.? Is there any directives already avialbale....?

[Sergey Chico]

Does someone know how to make request using $http or $resource on submit button of popup?

[Martin Alix]

So far:

app.directive('xeditable', [ '$http', '$timeout', 'localize', function ($http, $timeout, localize) {

    var save = function (url, params) {

        var d = new $.Deferred;

        var promise = $http

            .post(url, params)

            .success(function(data, status, headers, config) {

                if(data.success == false) {

                    return d.reject(localize.getLocalizedString(data.error));

                }

                d.resolve();

            })

            .error(function(data, status, headers, config) {

                console.log(["error", arguments]);

                return d.reject(localize.getLocalizedString('a network error occured, please try again')); //returning error via deferred object

            });

        $timeout(function () {

            promise.resolve();

        }, 10);

        return d.promise();

    };

    return {

        restrict: 'A',

        require: "ngModel",

        link: function (scope, element, attrs, ngModel) {

//            scope.$watch('ngModel', function (value) {

//                console.log(value);

//            });

            var loadXeditable = function () {

                angular.element(element).editable({

                    mode: 'popup',

                    value: scope.$eval(attrs.ngModel),

                    placement: 'top',

                    validate: function (value) {

                        var required = false;

                        if (attrs.required && (isEmpty(value) || value === false)) {

                            return localize.getLocalizedString("field is required");

                        }

                        var match = attrs.ngPattern.match(/^\/(.*)\/([gim]*)$/);

                        if (match) {

                            var pattern = new RegExp(match[1], match[2]);

                            if (isEmpty(value) || pattern.test(value)) {

                                return null;

                            }

                            if(attrs.patternMessage != void 0) {

                                return attrs.patternMessage

                            } else {

                              return localize.getLocalizedString("value is invalid");

                            }

                        }

                    },

                    url: function (params) {

                        return save(attrs.xeditable, params);

                    },

                    display: function (value, srcData) {

                        ngModel.$setViewValue(value);

                        scope.$apply();

                    }

                });

            }

            $timeout(function () {

                loadXeditable();

            }, 10);

        }

    };

}]);

[Andy Lee]

I try to add the following and it fail to getting value from scope when click to popup edit, Does anyone know how to fix it?

 

// this code is similar delay load data by $http

function Ctrl($scope, $timeout) {
    $timeout(function () {
        $scope.due_date = new Date();
        $scope.person_name = "ssssssss";
        $scope.address = "133, North Avenue";
    }, 500);
}

[Vitaliy Potapov]

Please have a look on http://vitalets.github.io/angular-xeditable

суббота, 15 декабря 2012 г., 5:32:24 UTC+4 пользователь Sebastien ARBOGAST написал: