使用角度1.x重新創建HTML點擊

我正在創建一個可以存儲圖像的相冊。我附上了一個簡單的HTML樣本專輯。我希望，一旦用戶完成了一張專輯的創建，並且他想創建另一張專輯，他只需按下一個加號。這樣，另一個模板就會出現，與我在代碼片段中包含的模板相同。再次，一旦用戶點擊加上另一個模板生成。有什麼辦法可以實現這個功能嗎？我可以考慮用Jquery這樣做，但我必須編寫整個divs，這是我猜的效率不高。例如，這裏是一個例子：using jquery。我在想如果有一種有效的方式。這樣我就不需要每次編碼HTML。我正在爲此使用angularJs 1.x。任何建議或幫助表示讚賞。感謝您的時間。使用角度1.x重新創建HTML點擊

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Page Title</title> 
 
</head> 
 

 
<body> 
 
    <div style="background-color: yellow; width: 40%"> 
 
    <div> 
 
     <h1>1st Album </h1> 
 
     <input type="text" name="albumName"> 
 
     <input type="submit"> 
 
    </div> 
 
    <div style="margin-top: 20px"> 
 
     <input type="file" name="photos"> 
 
    </div> 
 
    <div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%"> 
 
     + 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-03-24 Yogesh Ghimire

一件事你可以做的是創建一個對象數組和循環使用的HTML ng-repeat指令數組。

創建一個對象數組這樣

$scope.items = [{ 
    name : "1 Album", 
    albumName : "" 
} ]

然後使用納克重複在DOM這樣

<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%"> 
    <div ng-repeat="item in items"> 
     <div> 
      <h1> {{item.name}}</h1> 
      <input type="text" name="item.albumName"> 
      <input type="submit"> 
     </div> 
     <div style="margin-top: 20px"> 
      <input type="file" name="photos"> 
     </div> 
     </div> 

     <div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()"> 
      + 
     </div>

在加號按鈕創建添加新對象到陣列的功能

$scope.addItem = function(){ 
    $scope.items.push({ 
    name : $scope.items.length+1 +" Album", 
    albumName : "" 
    }) 
    }

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.items = [{ 
 
name : "1 Album", 
 
albumName : "" 
 
} ] 
 

 
$scope.addItem = function(){ 
 
$scope.items.push({ 
 
name : $scope.items.length+1 +" Album", 
 
albumName : "" 
 
}) 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%"> 
 
<div ng-repeat="item in items"> 
 
    <div> 
 
     <h1> {{item.name}}</h1> 
 
     <input type="text" name="item.albumName"> 
 
     <input type="submit"> 
 
    </div> 
 
    <div style="margin-top: 20px"> 
 
     <input type="file" name="photos"> 
 
    </div> 
 
    </div> 
 
    
 
    <div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()"> 
 
     + 
 
    </div> 
 
</div>

來源

2017-03-24 10:10:58

使用角度1.x重新創建HTML點擊

回答

相關問題