How to get dynamic array input value in angularjs .i want to collect all values of input in angular js function and retun from function so that the return value can be displayed any where in the page .Is it possible because it is possible in php that if i submit form with array of input like $cat in this case ,and can be displayed anywhere in the page .
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat" >
In your controller $scope.cat = ["a","b","c","d"]
and in your view:
<input type="text" name="cat[]" ng-model="cat[0]">
<input type="text" name="cat[]" ng-model="cat[1]">
<input type="text" name="cat[]" ng-model="cat[2]">
<input type="text" name="cat[]" ng-model="cat[3]">
or dynamic with ng-repeat
<div ng-repeat="c in cat">
<input type="text" value="{{c}}" ng-model="cat[$index]">
</div>
Related
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am working in a project where i have to retrieve details from mongod and show it as a type ahead in a text box .
My code is
Html :
<div class="form-group">
<label for="resourceName" class="col-sm-4 control-label">Enter the Page Name<span>*</span></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="title" ng-model="selected" typeahead="getPageName()" required>
</div>
</div>
Controller :
$scope.getPageName = function(){
return $http.get('/api/getPageName').success(function(response){
return limitToFilter(response.data, 15);
}).error(function(response){
});
};
But the problem is that , the function is not at all getting called if i type in the textbox .
Thanks in advance
you can use ng-change directive to call function after you start typing.
<input type="text" class="form-control" name="title" ng-model="selected" ng-change="getPageName()" required>
https://docs.angularjs.org/api/ng/directive/ngChange
How can one input be the same value as another input via angularjs? I know how to do this via jquery but not in angularjs. Here is my code:
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
<script type="text/javascript">
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('myController', function(){
$scope.input = {
'username': $scope.input.user_code
}
});
</script>
So basically what I want is the first input element to be the same value as the second input element
use ng-blur or ng-change
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-blur="input.username = input.user_code" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
The answer above works, but if you want it to update in real time, just use the same model:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.user_code" name="username" type="text" required>
When you change one of the two, the other will update as well. You can also use this as any other tag. For example, this will show what you type on the <p> tag:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<p> {{ input.user_code }} </p>
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
I’m trying to get user.name.length value at error message.
If jQuery is used, it is realizable, but isn't there any method unique to Angularjs?
<form novalidate name="myForm" ng-submit="addUser()">
<p>Name:
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
<span ng-show="myForm.name.$error.minlength">{{user.name.length}} too short!</span>
Can you try with {{myForm.name.$viewValue.length}}, like below:
<input type="text" name="name" ng-model="user.name" ng-minlength="5" ng-maxlength="8" />
<span ng-show="myForm.name.$error.minlength">{{myForm.name.$viewValue.length}} too short!</span>
<span ng-show="myForm.name.$error.maxlength">{{myForm.name.$viewValue.length}} too long!</span>
The way ng-minlength and ng-maxlength work, if the input textbox has fewer or more characters than specified by the two directives, then user.name is not populated (I don't even think it is defined). To see what I mean, add {{user.name}} after the <span>.