jQueryUI의 선택된 테마를 업데이트하는 방법 AngularJS로 선택 하시겠습니까?

Question

AngularJS와 함께 jQueryUI Selectable 위젯을 사용하고 싶습니다. 원하는 UI 효과를 얻기 위해 잘 작동하는 AngularUI의 ui-jq jQuery Passthrough 지시문을 사용하여 포함 시켰습니다. 이제 AngularJS를 사용하여 선택한 항목의 데이터를 업데이트하려고하지만이를 수행 할 방법을 찾지 못했습니다.

AngularUI Sortable directive이 있는데 이것은 Selectable 지시문을 구현하는 데 좋은 출발점이 될 수 있지만 방금 AngularJS로 시작한 이래로 필자의 요구에 적응하는 데 어려움이 있습니다.

예 :

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

어떻게 선택한 항목의 이름을 업데이트 할 수 있습니까?

당신은 각-UI를 필요없이 선택에 대한 지침을 만들고 범위에 addItem() 방법

HTML 항목을 추가 할 수 있습니다

Answer 1

:

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

를

업데이트는 다음을 선택하면 목록 항목을 업데이트하는 모델의 AA 동적 집합을 만드는 방법은 다음과 같습니다

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/