1

I would like to use the jQueryUI Selectable widget together with AngularJS. I managed to include it using the ui-jq jQuery Passthrough directive from AngularUI which is working well to get the desired UI effect. Now I want to update the data of the selected items using AngularJS but couldn't figure out a way to do it.

I found the AngularUI Sortable directive, which may be a good starting point to implement a Selectable directive, but as I just started with AngularJS I have trouble adapting it to my needs.

Example:

http://jsfiddle.net/ffeldha/2KzRt/

How can I update the name of the selected items?

||||||
3

You can create a directive for selectable without needing angular-ui and add items with an addItem() method in scope

HTML:

<ol ui-selectable>

JS

var myApp = angular.module('soil', [])

myApp.directive('uiSelectable', function () {
    return function (scope, el, attrs) {
        el.selectable();
    };
});

function ItemCtrl($scope) {
    /* triggered by "ng-submit" on a form*/
    $scope.addItem = function () {
        /* newItem comes from "ng-model" on an input*/
        if (!$scope.newItem.length) {
            return;
        }
        $scope.items.push({
            name: $scope.newItem
        });

        $scope.newItem = '';
    };
    $scope.newItem = '';
    $scope.items = [{
        name: 'one'
    }, {
        name: 'two'
    }, {
        name: 'three'
    }];
}

DEMO:http://jsfiddle.net/2KzRt/5/

Update Here's how to create a a dynamic set of models to update the list items when selected:

HTML:

    <div id="update_items" ng-show="updateItems.length">
        <div ng-repeat="item in updateItems"> 
           <input value="{{item.name}}" ng-model="items[item.index].name"/>
        </div>
        <button ng-click="updateItems=[]">Cancel</button>
    </div>

JS:

var myApp = angular.module('soil', [])

myApp.directive('uiSelectable', function () {
    return function (scope, el, attrs) {
        el.selectable({
            stop:function(evt,ui){

                var selected=el.find('.ui-selected').map(function(){
                    var idx=$(this).index();
                    return {name: scope.items[idx].name, index:idx}
                }).get();

                scope.updateItems=selected;
                scope.$apply()
            }
        });
    };
});


function ItemCtrl($scope) {

    $scope.addItem = function () {
        if (!$scope.newItem.length) {
            return;
        }
        $scope.items.push({
            name: $scope.newItem
        });

        $scope.newItem = '';
    };
    $scope.newItem = '';
    $scope.updateItems=[];
    $scope.items = [{
        name: 'one'
    }, {
        name: 'two'
    }, {
        name: 'three'
    }];
}

DEMO: http://jsfiddle.net/2KzRt/7/

||||||
  • Thanks for the update, that seems to solve my problem. I will just apply it to my full application to see if there is anything I did not understand before accepting your answer. – Florian Feldhaus Feb 24 '13 at 16:12
  • 1
    am learning angular myself...this was good exercise to learn how to create dynamic models..hope it works out for you – charlietfl Feb 24 '13 at 16:13
  • It works very well. I adapted it a bit to my needs and added a dialog to ask for the new name of the selected items: jsfiddle.net/SaBaJ/2 – Florian Feldhaus Feb 24 '13 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.