javascript - 如何创建dom元素,取决于填充输入

标签 javascript angularjs

有 5 个文本输入。需要检查这 5- INPUT 有多少个已完成,并且当您单击按钮时创建的元素等于已完成 INPUT 的数量。

如何在 Angular 上做到这一点?

<div class="list">
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_second.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_third.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_fourth.text">
    </label>
    <label class="item item-input">
        <span class="input-label">Input</span>
        <input type="text" ng-model="example_fifth.text">
    </label>
</div>

最佳答案

与@Shimrra答案类似,我创建了一个Plunker,它可以满足您的需求:http://plnkr.co/edit/gJHjkJJNRGI9W1M0E1bN?p=preview

希望这对你有用

HTML:

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

Controller :

 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:''});
   }
 }

});

关于javascript - 如何创建dom元素,取决于填充输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29877617/

相关文章:

javascript - 复制方法后的不同行为

javascript - 将类中元素的值输入到 onclick 中

javascript - Angular Controller 范围范围

php - 多个 MySQL 查询在本地计算机上运行,​​但在远程计算机上运行不正常

angularjs - $httpProvider请求拦截器-获取参数

javascript - Blob 下载在 IE 中不起作用

javascript - 使用内部对象数组遍历对象并获取键索引nodejs

javascript - 使用javascript选择所有多选选项

html - 背景图像在 AngularJS 的 IE8 中不起作用

javascript - 使用 Angular 生成动态可点击的 Bootstrap 选项卡