Question

我正在创建一个可以存储图像的相册。我为示例专辑添加了一个简单的HTML。我希望，一旦用户完成创建专辑并且他想创建另一个专辑，他只需按一个加号。这样就会出现另一个模板，它与我在代码段中包含的模板相同。再次，一旦用户点击加上另一个模板生成。有什么方法可以实现这个功能吗？我可以考虑用Jquery来做这件事，但是我必须写出整个divs，这是我猜的效率。例如，这是一个例子：using jquery。我在想是否有一种有效的方法。这样我每次都不需要编码HTML。我正在使用angularJs 1.x执行此操作。任何建议或帮助表示赞赏。谢谢你的时间。

＆＃13;

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

＆＃13;

Answer 1

您可以做的一件事是创建一个对象数组并使用html中的ng-repeat指令循环该数组。

创建一个像这样的对象数组

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

然后像这样在DOM中使用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>

在加号按钮中创建一个向数组添加新对象的函数

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

＆＃13;

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 : ""
})
}
})

＆＃13;

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

＆＃13;

使用angular 1.x

1 个答案: