Recreate HTML on click using angular 1.x

Question

I am creating an album where I can store images. I have attached a simple HTML for sample album. I was hoping, once the user finishes creating an album and he wants to create another one, he simply presses a plus sign. That way another template appears which is same as the one I have included in the snippet. Again, once the user clicks plus another template generates. Is there any way I can achieve this functionality? I can think of doing this with Jquery but I have to write the whole divs which is not efficient I guess. For instance, here is an example : using jquery . I was thinking if there is an efficient way of doing. That way I dont need to code the HTML each time. I am doing this using angularJs 1.x for that. Any suggestion or help is appreciated. Thank you for your time.

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

Sachila Ranawaka · Accepted Answer · 2017-03-24 10:10:58Z

One thing you can do is create a object array and loop the array using ng-repeat directive in the html.

create a object array like this

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

Then use ng repeat in the DOM like this

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

In the plus button create a function that add new object to the array

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

Collectives™ on Stack Overflow

Recreate HTML on click using angular 1.x

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related