Javascript 使用JSON数据更新jqueryUI-draggable_Javascript_Jquery_Angularjs_Json_Jquery Ui

Javascript 使用JSON数据更新jqueryUI-draggable

javascript jquery angularjs json jquery-ui

Javascript 使用JSON数据更新jqueryUI-draggable,javascript,jquery,angularjs,json,jquery-ui,Javascript,Jquery,Angularjs,Json,Jquery Ui,我的div位于不同的位置，可以移动，并且有一个textfield。我使用一个JSON文件来存储每个不同div的坐标以及任何文本。我还使用angularjs进行页面交互。我得到了可拖动的部分，但我在保存新坐标和文本时遇到了问题。假设用户单击save按钮，所有内容都应该更新。我使用http.get将JSON文件放到页面上。我被困在如何使用http.post更新divs上 index.html <!DOCTYPE html> <html lang="en" ng-app="conta

我的div位于不同的位置，可以移动，并且有一个textfield。我使用一个JSON文件来存储每个不同div的坐标以及任何文本。我还使用angularjs进行页面交互。我得到了可拖动的部分，但我在保存新坐标和文本时遇到了问题。假设用户单击save按钮，所有内容都应该更新。我使用http.get将JSON文件放到页面上。我被困在如何使用http.post更新divs上

index.html

<!DOCTYPE html>
<html lang="en" ng-app="container">
<head>
  <meta charset="utf-8">
  <title>efoli</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="containers.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="Style/design.css">

</head>
  <body ng-controller="ContainerController as contain">
    <div id="grid"></div>
    <div class="container">
      <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <a class="navbar-brand">NAME</a>
            <form ng-submit="submit()">
                <input type="submit" id="submit" value="save"/>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li class=dropdown>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">Account<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                  <li><a href="#">something</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="drag resize" ng-repeat="product in contain.block" style="position:absolute; top:{{product.x}}; left:{{product.y}}" movement>
      <h1>{{product.title}}</h1>
      <textarea ng-model="newText" style="display:table-cell; width:inherit; height:inherit"></textarea>
    </div>
  </body>
</html>

data.json

[
  { "title" : "Test1",
    "text" : "",
    "x" : "151px",
    "y" : "350px" },
  { "title" : "Test2",
    "text" : "",
    "x" : "151px",
    "y" : "700px" },
  { "title" : "Test3",
    "text" : "",
    "x" : "351px",
    "y": "525px"},
  { "title" : "Test4",
    "text" : "",
    "x" : "251px",
    "y" : "525px"},
  { "title" : "Test5",
    "text" : "",
    "x" : "451px",
    "y" : "525px"}
]

[
  { "title" : "Test1",
    "text" : "",
    "x" : "151px",
    "y" : "350px" },
  { "title" : "Test2",
    "text" : "",
    "x" : "151px",
    "y" : "700px" },
  { "title" : "Test3",
    "text" : "",
    "x" : "351px",
    "y": "525px"},
  { "title" : "Test4",
    "text" : "",
    "x" : "251px",
    "y" : "525px"},
  { "title" : "Test5",
    "text" : "",
    "x" : "451px",
    "y" : "525px"}
]