How to create dom elements, depending on the filling input
Question
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>
3 answers
solution1
1 2015-04-26 12:39:54
Assuming you have a button with ng-click directive to a click handler.
One nasty approach is to check each your model(.text) to determine which contains a value.
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.
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.
solution2
1 2015-04-26 12:42:53
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++;
}
}
solution3
1 ACCPTED 2015-04-26 13:25:38
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:''});
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.