简体   繁体   English

如何为另一个模板创建一个dom元素?

[英]How to create a dom element to another Template?

I have an example of a script. 我有一个脚本示例。 In short - if you click on "add" creates a number of new elements as it was filled fields. 简而言之-如果单击“添加”,则会在填充字段时创建许多新元素。 Used ionic. 用过的离子。 It is necessary to make sure that when you click on "add" to open a new template, and already there to create elements. 有必要确保当您单击“添加”以打开新模板时,已经在其中创建元素。 But not now. 但是不是现在。

<!DOCTYPE html>
<html ng-app='main.app'>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller='AppController as AppCtrl'>
    <div class="list">
    <label class="item item-input" ng-repeat="item in AppCtrl.items track by $index">
        <span class="input-label">Input</span>
        <input type="text" ng-model="item.text">
    </label>
    </div>
    <a class="btn btn-default" ng-click="AppCtrl.AddItems()">Add</a>
  </body>

</html>

angular.module('main.app', [])
.controller('AppController',function(){
  var self = this;

  self.items = [{text:''},{text:''},{text:''},{text:''},{text:''}];

  self.AddItems = function(){
    var empty = 0;
    for(var i = 0; i < self.items.length; i++){
      if(self.items[i].text == ''){
        empty++;
      }
    }
    empty = 5-empty;

    for(var i = 0; i < empty; i++){
      self.items.push({text:''});
    }
  }

});

Plunker 柱塞

I may have misunderstood your needs, but it looks you have a small confusion with your empty variable. 我可能误解了您的需求,但看起来您对empty变量有些困惑。

In your last for iteration, empty is 0 and then no items are added to your array. 在你最后的迭代empty0 ,然后没有任何项目添加到您的阵列。

For example, if you change your for condition to: 例如,如果将for条件更改

for(var i = 0; i < 5; i++){
    self.items.push({text:''});
}

You have the items added to your array and to your html. 您已将项目添加到数组和html中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM