我已經實現了排序圖像位置的排序選項。 現在我添加了選項,如果有少於5個圖像,我不想另一個「div」顯示哪個將用於添加新圖像。 的問題是,「增加新形象」的DIV是另一個DIV使第二個div不能使用角度可排序排序
這是我的HTML
<div ui-sortable="sortableOptions" ng-model="images" style="overflow:auto; margin:0 auto;">
<div ng-repeat="i in images track by $index | orderBy:'position'">
<figure>
<div class="photoframe with_buttons relative shadow r_corners wrapper">
<img src="images/products/{{i.thumbName}}" alt="{{product[0].name}}" class="tr_all_long_hover" >
<div class="open_buttons clearfix">
<div>
<a ng-click="removeImage(product[0].id_product, i.id_image, product[0].alias)" role="button">
<i class="fa fa-trash-o"></i>
</a>
</div>
</div>
</div>
</figure>
</div>
<div ng-hide="numberOfImages > 4" >
<figure class="d_xs_inline_b">
<div>
<img src="images/file_add.png" class="tr_all_long_hover" title="Add new image" >
<div>
<div class="f_left f_size_large tr_all_hover">
<a ng-click="addNewImage()" role="button">
<i class="fa fa-arrow-circle-o-up"></i>
</a>
</div>
</div>
</div>
</figure>
</div>
</div>
這是我的編輯產品控制器,刪除圖像,並在底部你會看到圖像分揀功能,需要限制爲附加圖像項目不排序
productsFactory.getProduct(alias).then(function(data){
$scope.numberOfImages = Object.keys(data[0].images).length;
$scope.images = data[0].images;
$scope.product = data;
})
$scope.updateProduct = function(){
$scope.submissionMessage = '';
$scope.submission = false;
$http({
method : 'POST',
url : $location.protocol() + '://' + $location.host() + '/server/api/products/update_product',
headers : { 'Content-Type': 'application/x-www-form-urlencoded' },
data : $.param({
id : $scope.product[0].id_product,
name : $scope.product[0].name,
description : $scope.product[0].description,
mainCategory : $scope.product[0].id_main_category,
category : $scope.product[0].id_category
})
}).success(function(data){
if(!data.success){
$scope.nameError = data.errors.name;
$scope.descriptionError = data.errors.description;
$scope.mainCategoryError = data.errors.mainCategory;
$scope.categoryError = data.errors.category;
$scope.submission = true;
}else{
$scope.submission = false;
$scope.submissionMessage = data.messageSuccess;
$scope.submissionSuccess = true;
productsFactory.getCurrentUserProducts().success(function(data){
$scope.userProducts = data;
$timeout(function(){$scope.submissionSuccess = false;}, 2000);
}).error(function(data){
console.log("Can't fetch users products" + data);
})
}
});
};
//Remove image from product
$scope.removeImage = function(id_product, id_image, alias) {
if ($scope.numberOfImages == 1) {
$scope.imgRemoveSuccessFail = true;
$scope.messageErrorPictureRemove =
"Sorry but your trading item needs at least one image. " +
"If you wan't to delete this one, please upload new one first!";
$timeout(function(){$scope.imgRemoveSuccessFail = false;}, 4000);
} else {
$http({
method: 'POST',
url: $location.protocol() + '://' + $location.host() + '/server/api/products/removeImageFromProduct',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({
'id_product': id_product,
'id_image': id_image
})
}).success(function (data) {
if(!data.success) {
$scope.imgRemoveSuccessFail = data.imgRemoveSuccessFail;
$scope.messageErrorPictureRemove = data.messageErrorPictureRemove;
$timeout(function(){$scope.imgRemoveSuccessFail = false;}, 2000);
}else{
productsFactory.getProduct(alias).then(function (data) {
$scope.images = data[0].images;
$scope.numberOfImages = Object.keys(data[0].images).length;
})
}
})
}
}
//Sort image position
//Disable img sorting for second div??
$scope.sortableOptions = {
stop: function() {
var pos = 0;
$scope.images.forEach(function(item){
item.position = pos;
pos++;
});
var id = $scope.product[0].id_product;
var img = JSON.stringify($scope.images);
productsFactory.updateImagesPosition(id, img).then(function(data){
if(data.data.success == true) {
$scope.success = data.data.success;
$scope.messageSuccess = data.data.messageSuccess;
$timeout(function(){$scope.success = false;}, 2000);
}else{
$scope.messageError = data.data.messageError;
$scope.fail = data.data.fail;
$timeout(function(){$scope.fail = false;}, 2000);
}
})
}
}
這是我的圖片看起來像如果一個人失蹤,新增加的圖像顯示 所以問題是這個第二個div也是可排序的,但我不是靜態的。 您是否看到任何可能性使第二個div無法排序? 如果您需要任何其他信息,請讓我知道,我會提供。
好吧,這裏是一個東西。它仍然可以排序:)我已經有類似的實現。我認爲我做錯了什麼,但看起來執行是正確的,問題依然存在。目前工作的唯一的是$ scope.sortableOptions下的「全局」選項{disabled:true,這個選項將刪除所有圖像的排序 –
嗯,你介意在這裏添加你的示例:https://jsbin.com/?html ,js,輸出(或在這裏:https://jsfiddle.net),使它更容易幫助你:-) –
我會做一個,直到明天。 thx求助 –