1

jQueryUISelectableウィジェットをAngularJSと一緒に使用したいと思います。ui-jqAngularUIのjQueryPassthroughディレクティブを使用してこれを含めることができました。これは、目的のUI効果を得るためにうまく機能しています。AngularJSを使用して選択したアイテムのデータを更新したいのですが、その方法がわかりませんでした。

AngularUI Sortableディレクティブを見つけました。これは、Selectableディレクティブを実装するための良い出発点かもしれませんが、AngularJSを使い始めたばかりなので、ニーズに合わせるのに苦労しています。

例：

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

選択したアイテムの名前を更新するにはどうすればよいですか？

4

1 に答える 1

3

angle-uiを必要とせずにselectableのディレクティブを作成し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/

于 2013-02-24T14:24:50.520 に答える