如何更新jQueryUI的選定對象可以用AngularJS選擇？

Question

我想將jQueryUI Selectable Widget與AngularJS一起使用。我設法使用來自AngularUI的ui-jq jQuery Passthrough指令來包含它，它很好地運行以獲得所需的UI效果。現在我想使用AngularJS更新所選項目的數據，但無法想出辦法。

我發現AngularUI Sortable directive，這可能是一個很好的起點來實現一個Selectable指令，但正如我剛剛開始使用AngularJS時，我無法適應它的需要。

例子：

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

如何更新所選項目的名稱？

Answer 1

您可以創建可選的一個指令，而無需角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' 
    }]; 
} 

DEMO：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/