更改时使用角度更新图像位置json

Question

我一直坚持我的项目，希望寄希望于你们，告诉我如何进一步发展。 目前，我的代码允许向左或向右拖放图像。 这应该定义图像位置。 现在我不知道如何制作一个可以更新json中图像位置的函数。 让我告诉你我的代码，我将进一步解释

这是我从服务器获得的图像响应。

[{"id_image":0,"thumbImage":"http://lorempixel.com/242/242/?52704","image":"http://lorempixel.com/1024/768/?37489","position":0},
{"id_image":1,"thumbImage":"http://lorempixel.com/242/242/?20352","image":"http://lorempixel.com/1024/768/?89352","position":1},
{"id_image":2,"thumbImage":"http://lorempixel.com/242/242/?27924","image":"http://lorempixel.com/1024/768/?45708","position":2},
{"id_image":3,"thumbImage":"http://lorempixel.com/242/242/?45140","image":"http://lorempixel.com/1024/768/?88511","position":3},
{"id_image":4,"thumbImage":"http://lorempixel.com/242/242/?10979","image":"http://lorempixel.com/1024/768/?98296","position":4}]

这是我的HTML，它显示并允许向左或向右拖放图像

<form>
  {{images}}
  <div class="row clearfix">
      <div ui:sortable ng:model="images" id="main" style="overflow:auto;">
         <div  ng:repeat="i in images track by $index" id="editProductImages">
            <figure class="d_xs_inline_b">
                <div>
                  <img src="{{i.thumbImage}}" alt="{{product[0].name}}">
                </div>
            </figure>
         </div>
     </div>
   </div>
</form>

我还添加了一些JQuery以使其正常工作，因为整个模板已经用JQuery编写了

//Sort product images
$(function() {
    $('#editProductImages').sortable({
        connectWith: '#main',
        scroll : false
    });
});

这就是我的项目目前的样子

这是我现在的控制器功能

productsFactory.getProduct(alias).then(function(data){
    //Fetch product data
    $scope.product = data;
    //Fetch images
    $scope.images = data[0].images;
})
    //Sort images function, how??
    $scope.updateImagePosition = function(){

    }

问题是我一直不希望用户按任何提交按钮。 当用户向左或向右移动任何图像时，我都不会立即发生这种情况。 我希望你们能帮助我。 如果您需要任何其他信息，请告诉我，我会提供

Answer 1

您可以使用sortable的update属性。 我已经展示了它是如何工作的。 您可以对其进行编辑以更改您拥有的JSON。 就像下面的代码一样，它也可以按角度工作！

 var app = angular.module("myapp", []); app.controller("c", function($scope) { $("#sortable1").sortable({ connectWith: ".connectedSortable", change: function(event, ui) { $(this).attr('data-previndex', ui.item.index()); }, update: function(event, ui) { var start_pos = $(this).attr('data-previndex'); var index = ui.item.index() + 1; var text = ui.item.text(); $(this).removeAttr('data-previndex'); $("#msg").append(text + " moved from " + start_pos + " to " + index + "</br>"); } }).disableSelection(); });

 #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <body ng-app="myapp" ng-controller="c"> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <p id="msg"></p> </body>

更改时使用角度更新图像位置json

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-29 07:20:03

更改时使用角度更新图像位置json

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-29 07:20:03

解决方案1
1 已采纳 2016-01-29 07:20:03