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

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

如何用AngularJS更新jQuery UI Select的所选项？

1 个答案: