CODEWITHSUNDEEP
javascriptangularjs
Dreamer
Dreamer

Reputation: 23

How to create dom elements, depending on the filling input

There are 5 text INPUT . Need to check how many of these 5- INPUT completed and when you click on the button to create elements equal to the number of completed INPUT .

How to do it on the 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>

Upvotes: 2

Views: 67

Answers (3)

shivas
shivas

Reputation: 923

Similar to @Shimrra answer, I have created a Plunker that does what your are looking for: http://plnkr.co/edit/gJHjkJJNRGI9W1M0E1bN?p=preview

Hope this works for you

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

});

Upvotes: 1

daxeh
daxeh

Reputation: 1085

Assuming you have a button with ng-click directive to a click handler.

  1. One nasty approach is to check each your model(.text) to determine which contains a value.

  2. Refactor code so that each input is bind to a single model ( object{} ) using ng-model directive. ie. model.input1, model.input2.. etc. A loop is required to check for values.

  3. We could also combine both ng-model and ng-change to detect changes and keep reference to values using directives. See tutorial

A rough idea:

HTML

.
<label class="item item-input">
  <span class="input-label">Input</span>
  <input type="text" ng-model="model.5">
</label>
.
<input type="button" value="Add" ng-click="add()"/>

Controller

// 2. a single model, loop through properties.
function(){
  'use strict';

  var myApp = angular.module('myApp',[]);
  myApp.controller('Controller', ['$scope', function($scope) {
    $scope.model = {};

    $scope.add = function() {
      for (var property in $scope.model) {
        // do stuffs
      }
    };
  }]);

Hope this helps.

Upvotes: 1

Shimrra
Shimrra

Reputation: 273

You can use an array for ng-model if you have a inputs number dynamic (in ng-repeat). (ng-model = examples[$index]).

In your controller, you can check with :

var count = 0;
for (var element in $scope.examples) {
    if (element.trim().length > 0) {
        count++;
    }
}

Upvotes: 1

Related Questions