如何基於按一下按鈕出現在輸入字段數，創建的div只有一次

什麼，我試圖做的是如下：如何基於按一下按鈕出現在輸入字段數，創建的div只有一次

從JSON文件獲取按鈕點擊數據。
在單獨的框中顯示數據，每個數組元素都不相同。例如，如果我的json給我3行數據，應該有3個框。
將方框放置在2X2的網格中。
酷似該圖像Wireframe for foodcourts

步驟1我容易地實現英寸我也可以在點擊按鈕時生成框，但不是如圖所示。此外，每次按鈕被點擊，它增加了div。我真的很感謝一些幫助。這裏是我的代碼：

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
    <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> 
    <style> 
    .shape{ 
     text-align:center; 
     background-image:url(dark-triangles.png); 
     width:200px; 
     height:60px; 
     line-height:60px; 
     color:white; 
     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; 
    } 
    .shape:hover{ 
     background: #ff7b29; 
     cursor: pointer; 
    } 
    body { 
     font-family: "Lato", sans-serif; 
    } 
    .sidenav { 
     height: 100%; 
     width: 250px; 
     position: fixed; 
     z-index: 1; 
     top: 0; 
     left: 0; 
     background-image: url("doodles.png"); 
     background-color: #cccccc; 
     overflow-x: hidden; 
     transition: 0.5s; 
     padding-top: 60px; 
    } 
    /*.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
    }*/ 
    /*.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
    }*/ 
    /*.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
    }*/ 
    /*@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
    }*/ 
    .div1 
    { 
     width:400px; 
     height:auto; 
     background:none; 
     margin:auto; 
     border:2px solid black; 
     margin-top:70px; 
    } 
    .divcontent 
    { 
     width:auto; 
     height:auto; 
     background:none; 
     margin:auto; 
     border:2px solid black; 
     margin-top:70px; 
    } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <body ng-controller="myController" background="cloudy-day.png" style="color:black;"> 
    <div id="mySidenav" class="sidenav"> 
     <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>!--> 
     <input value={{len}}> 
     </input> 
    <button class="shape" id="orders" > 
     Orders 
     <button class="shape" id="users"> 
     Users 
     <button class="shape" ng-click="fcclicked()"> 
      Food Courts 
      <button class="shape"> 
      Delivery Locations 
      </div> 
      <div class="div1"; id="d1"> 
      <p align="center">Click one of the buttons to load content..... 
      </p> 
      <div ng-repeat="x in names"> 
       {{ x.id}} 
       {{ x.name }} 
       {{ x.address }} 
      </div> 
      <!--    <script language="javascript"> 
function cdiv() 
{ 
/* var nums=document.getElementById(); 
var div = document.createElement("div"); 
div.style.width = "100px"; 
div.style.height = "100px"; 
div.style.background = "red"; 
div.style.color = "white"; 
div.innerHTML = "Hello"; 
div.style.display="inline-block"; 
div.style.margin="10px"; 
document.getElementById("d1").appendChild(div);*/ 
} 
</script>!--> 
      </div> 
      <script> 
      angular.module('myApp', []) 
       .controller('myController', function($scope,$http) { 
       $scope.fcclicked= function(){ 
       alert("hiii"); 
       $http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list') 
        .success(function(response) { 
        $scope.names = response.foodCourts; 
        $scope.len=response.foodCourts.length; 
        //var newEle = angular.element("<table class='square'></div>"); 
        //var target = document.getElementById('d1'); 
        //angular.element(target).append(newEle); 
        /*for(i =1 ; i <$scope.len ;i++){ 
         var newEle = angular.element("<div class='square' id='myddiv'></div>"); 
         angular.element(target).append(newEle); 
         }*/ 
       } 
         ); 
       } 
      } 
         ); 
      </script> 
      <style> 
      .square { 
       width: 100px; 
       height: 100px; 
       background: red; 
       display:inline-block; 
       margin:10px; 
      } 
      </style> 
      <!--<script> 
$(document).ready(function(){ 
$(document).click(function(e){ 
if(e.target.id=="orders") 
{ 
//$("#d1").append(''); 
} 
if(e.target.id=="users") 
{ 
} 
// $("#d1").fadeIn(); 
//$("#div2").fadeIn("slow"); 
//$("#div3").fadeIn(3000); 
}); 
}); 
</script> 
<!--<script> 
function openNav() { 
document.getElementById("mySidenav").style.width = "250px"; 
} 
function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
} 
</script>!--> 
      <style> 
      .minidiv 
      { 
      } 
      </style> 
      </body> 
     </html>

來源

2017-08-30 user4678940

好了，所以如果我理解你想要的東西，你希望數據在每個條目的DIVS內呈現嗎？ – Sletheren

是的。完全像在圖片 – user4678940

[Input]（https://www.w3schools.com/tags/tag_input.asp）標籤不需要結束標籤，但[button]（https://www.w3schools.com/tags /tag_button.asp）標籤確實需要結束標籤。 – abhig10

好了，有很多的問題

風格標籤應在頭部
按鈕，必須關閉<button></button>
輸入標籤總是b應該像這樣關閉<input />
腳本標記最好駐留在主體的頭部或底部

我固定的一些造型浮動的div，所以你可以有你想要的，你現在想，你修改代碼相同的想法：

angular.module('myApp', []) 
 
     .controller('myController', function($scope, $http) { 
 
     $scope.fcclicked = function() { 
 
      alert("hiii"); 
 
      $http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list') 
 
      .success(function(response) { 
 
       $scope.names = response.foodCourts; 
 
       $scope.len = response.foodCourts.length; 
 
      }); 
 
     }; 
 
     })

.shape { 
 
    text-align: center; 
 
    background-image: url(dark-triangles.png); 
 
    width: 200px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    color: white; 
 
    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; 
 
    } 
 
    
 
    .shape:hover { 
 
    background: #ff7b29; 
 
    cursor: pointer; 
 
    } 
 
    
 
    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-image: url("doodles.png"); 
 
    background-color: #cccccc; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    } 
 
    
 
    .div1 { 
 
    box-sizing: border-box; 
 
    width: 400px; 
 
    height: auto; 
 
    background: none; 
 
    margin: auto; 
 
    border: 2px solid black; 
 
    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: 48%; 
 
    height: 100px; 
 
    background: red; 
 
    display: inline-block; 
 
    margin: 1%; 
 
    float: left; 
 
    padding: 10px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!doctype html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <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> 
 

 
<body ng-controller="myController" background="cloudy-day.png" style="color:black;"> 
 
    <div id="mySidenav" class="sidenav"> 
 
    <input value={{len}} /> 
 
    <button class="shape" id="orders">Orders</button> 
 
    <button class="shape" id="users">Users</button> 
 
    <button class="shape" ng-click="fcclicked()">Food Courts</button> 
 
    <button class="shape">Delivery Locations</button> 
 
    </div> 
 
    <div class="div1" id="d1"> 
 
    <p align="center">Click one of the buttons to load content..... 
 
    </p> 
 
    <div class="square" ng-repeat="x in names"> 
 
     {{ x.id}} {{ x.name }} {{ x.address }} 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-30 09:49:11 Sletheren

非常感謝！這非常有幫助。此外，謝謝你讓我談談細節。我肯定會將其納入其他頁面。只是一個請求，先生，請你詳細說明你在CSS中執行了什麼chnages，以及它們如何影響輸出？謝謝 – user4678940

不客氣！我添加了浮動寬度爲48％的div，剩下1％的餘量和1％的餘量，我還添加了填充和框大小：border-box，所以它的填充不會影響寬度該div :) – Sletheren

我試着upvoting，但我的代表是不夠的！不要擔心，只要我reah 15我一定會這樣做！你的答案值得！ :) – user4678940

如何基於按一下按鈕出現在輸入字段數，創建的div只有一次

回答

相關問題