You can create a directive for selectable without needing angular-ui and add items with an addItem()
method in scope
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/
Update Here's how to create a a dynamic set of models to update the list items when selected:
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'
}];
}