Как обновить выбранные элементы jQueryUI, которые можно выбрать с помощью AngularJS?

Question

Я хотел бы использовать jQueryUI Selectable виджет вместе с AngularJS. Мне удалось включить его с помощью ui-jq jQuery Passthrough директива от AngularUI, которая хорошо работает, чтобы получить желаемый эффект пользовательского интерфейса. Теперь я хочу обновить данные выбранных элементов, используя AngularJS, но не могу найти способ сделать это.

Я нашел директиву AngularUI Sortable, которая может быть хорошей отправной точкой для реализации директивы Selectable, но, поскольку я только начал работать с AngularJS, у меня возникли проблемы с адаптацией к моим потребностям.

Пример:

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

Как я могу обновить название выбранных предметов?

Answer 1

Вы можете создать директиву для выбора без использования angular-ui и добавлять элементы с помощью addItem() метод в области

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'
    }];
}

ДЕМО: http://jsfiddle.net/2KzRt/5/

Обновление Вот как создать динамический набор моделей для обновления элементов списка при выборе:

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'
    }];
}

ДЕМО: http://jsfiddle.net/2KzRt/7/