如何使用 AngularJS 更新 jQuery UI Selectable 的选定项目？

Question

我想将 jQueryUI Selectable 小部件与 AngularJS 一起使用。我设法使用来自 AngularUI 的 ui-jq jQuery Passthrough 指令将其包含在内，该指令可以很好地获得所需的 UI 效果。现在我想使用 AngularJS 更新所选项目的数据，但想不出办法。

我找到了AngularUI Sortable directive，这可能是实现 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/