Question

我有一个页面，我动态创建divs并通过AngularJS http get方法在其中呈现文本。创建的divs的数量等于get方法捕获的行数。如果我得到6行数据，则会有6 divs并排放置。就像这样：

我的下一步是点击div，在它旁边创建一个新div，这样我就可以编辑div内容。与此图片完全相同：

。

对我来说，主要关注的是在编辑完成后重新调整所有divs。此外，我可以创建一个div，但它会附加到结尾，而不是在中间。如果有帮助，这是我的代码：

的index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="fcourtstyle.css">
    <meta charset="utf-8">
    <title>Untitled Document
    </title>
  </head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
  </script>
  <script src="gendata.js">
  </script>
  <body ng-controller="myController" style="background-color:#BB8C8D;" id="mybody">
    <div id="mySidenav" class="sidenav">
      <p class="shape" id="orders">Orders
      </p>
      <p class="shape" id="users">Users
      </p>
      <p class="shape" ng-click="fcclicked()">Food Courts
      </p>
      <p class="shape">Delivery Locations
      </p>
    </div>
    <div class="div1" id="d1">
      <div style="font-size:450%" align="center">Restaurant Food App
      </div>
      <p align="center" id="bodytext">Click one of the buttons to load content.....
      </p>
      <div id="mybox">
        <div class="square" ng-repeat="x in names" onClick="showtext()" id="dynamicdiv">
          <p align="center">
            <img src="../hotel.png"/ style="width:150px; height:50px;">
          </p>
          <p align="justify">  
            <strong> {{ x.name }} 
            </strong> 
          </p>
          {{ x.address }}
        </div>
      </div>
    </div>
    <div align="center">
      <Input type="button" value="Add Food Court" id="addfc" onClick="myBlurFunction(1)">
        </input>
    </div>
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;
        </span>
        <p>Add Food Court
        </p>
        <div style="width:150px; height:100px; border:2px solid black; float:left;">
          <img id="blah" src="#" alt="your image" />
        </div>
        <div style="width:150px; height:100px;float:left; margin-left: 20px;">
          <input type="text" placeholder="Food Court Name">
          <input type="text" placeholder="Food Court Adress">
          <input type="text" placeholder="Pre-Order Time">
          <input type="button" value="Create">
        </div>
        <input type='file' align="right" onchange="readURL(this);" />
      </div>
    </div>
  </body>
</html>
<script language="javascript">
  var modal = document.getElementById('myModal');
  // Get the button that opens the modal
  var btn = document.getElementById("addfc");
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  // When the user clicks on the button, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
  }
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  function readURL(input) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
        .attr('src', e.target.result)
        .width(150)
        .height(100);
    };
    reader.readAsDataURL(input.files[0]);
  }
</script>

gendata.js

angular.module('myApp', [])
.controller('myController', function($scope, $http)
{
$scope.fcclicked = function()
{
myEl = angular.element(document.querySelector('#bodytext')); 
myEl.html('List of Food Courts');     
$http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
.success(function(response)
{
$scope.names = response.foodCourts;
$scope.len = response.foodCourts.length;
});
};
})
function showtext()
{
var text=document.getElementById("dynamicdiv").textContent;
alert(text);
var staticdiv=document.getElementById("dynamicdiv");
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'squaretwo';
document.getElementById("mybox").appendChild(iDiv);
}

fcourtstyle.css

.shape {
text-align: center;
/*    background-image: url(dark-triangles.png);*/
/*background-color:#CB8182;*/
width: 200px;
height: 60px;
line-height: 60px;
margin: 10px;
position: relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
.shape:before {
/* content: "";
width: 0px;
height: 0px;
border-top: 60px solid rgba(107, 255, 55, 105);
border-left: 60px solid transparent;
position: absolute;
right: 0%;
top: 0px;*/
width: 0;
height: 0;
border-top: 50px solid transparent; 
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
.shape:hover {
background: #FFC0CB;
cursor: pointer;
border:5px solid black;
}
body {
font-family: "Lato", sans-serif;
box-sizing: border-box;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#8E6162;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border:5px solid black;
}
.div1 {
box-sizing: border-box;
width: 700px;
height: auto;
background: none;
margin: auto;
margin-top: 70px;
overflow: hidden;
}
.divcontent {
width: auto;
height: auto;
background: none;
margin: auto;
border: 2px solid black;
margin-top: 70px;
}
.square {
box-sizing: border-box;
width: 28%;
height: 200px;
background: pink;
display: inline-block;
margin: 1.5%;
float: left;
padding: 5px;
border: 1.5px solid #907D7E;
}
.squaretwo {
box-sizing: border-box;
width: 28%;
height: 200px;
background: pink;
display: inline-block;
margin: 1.5%;
float: left;
padding: 5px;
border: 1.5px solid #907D7E;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
overflow: auto; /* Enable scroll if needed */
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.blur   {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
.overlay    {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}

在两个div之间设置动态创建的div，调整进程中所有其他div的位置

0 个答案: