UI-sortable is not working

[Deleted user]

hi,I have check box and button.After checked check box when i click button it will add into array.when i try to move upwards and downwards it will not work

[thgreasi]

I think that your issue is that you didn't define ng-model as the console states.

[Deleted user]

i have my code below.could you please tell me the issue

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script> <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script> <title>JS Bin</title>

• {{album.name}}

<button type='button' ng-click="save()">Save</button><br>
    <div ui-sortable="sortableOptionsList[0]" >
        {{albumNameArray}}
    </div>
    <div ui-sortable="sortableOptionsList[0]">
        <div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
    </div>
</body>

<script> angular.module('test', ['ui.sortable'])

.controller('Test', function($scope){

$scope.albumArray = [];

$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];

function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}

$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];

$scope.trackOrder = function(album){
//add album in the array
if(album.selected){
$scope.albumArray.push(album.name);
}else{
//remove album fron the array
var index = $scope.albumArray.indexOf(album.name);
$scope.albumArray.splice(index,1);
}
}

$scope.save = function(){
//if you want the value on albumNameArray on click on save use this else you can
//use the $scope.albumArray directly
$scope.albumNameArray = angular.copy($scope.albumArray);
}
})

</script>

[thgreasi]

The <div ui-sortable="sortableOptionsList[0]" ng-model="albumNameArray"> should also define the ng-model attribute and provide the array that you run your ng-repeat on. Just make sure to also initialize it in your controller $scope.albumNameArray = [].

[Deleted user]

HI thgreasi,Thank you for responding again.I tried which u told but still i am not able to get output.Could you please make plunkr if you do not mind??

[thgreasi]

How about this?

[Deleted user]

@ thgreasi Thanks you are awesome