角度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ディレクティブを使用してアレイを作成することです。

配列に新しいオブジェクトを追加する関数を作成後、プラスボタンでこの

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

のようなDOMでNGリピートを使うこの

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

のようなオブジェクトの配列を作成

$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を再作成

答えて

関連する問題