In angularjs,I want to get the value of the hidden input. such as the following:
<pre>
<input type="hidden" name="captId" value="AqXpRshs9QHfxUbOWqMT" ng-model="captId">
</pre>
How to get the "hidden input" value "AqXpRshs9QHfxUbOWqMT" by using angularjs,not ajax or jquery.
You can use ng-init to initialize the value so it binds that to your model variable upon creation.
<input type="hidden" name="captId" ng-init="captId='AqXpRshs9QHfxUbOWqMT'" ng-model="captId">
Or you can get it directly if all else fails:
angular.element(document.getElementsByName('captId')[0]).val();
// or dont use angular at all
document.getElementsByName('captId')[0].value
Documentation for angular.element
By ID
document.getElementById('yourId').value
By Name
document.getElementsByName('yourName')[0].value
Keep it simple :)
Related
We can get the validation info if the input is in a form: $scope.myForm.myField.$invalid etc..
What if input is outside of a form? How can we access the info?
I guess that field data (properties of the form object) is not same thing with ngModel. I tried something like this but didn't worked: (the model only contains string value of the input)
<input ng-model="myFakeForm.myField">
How can I achieve this?
Use the ng-form directive:
<div ng-form="set1">
<input name="field1" ng-model="myFakeForm.myField" ng-required="true" />
</div>
The input's ngModelController will be bound to $scope.set1.field1:
console.log($scope.set1.field1.$valid);
console.log($scope.set1.field1.$viewValue);
//... etc
For more information, see
AngularJS ng-form Directive API Reference
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
input type="text" placeholder="" ng-autocomplete ng-keyup="addDeliveryAreas($event)" ng-model="deliveryareas.search" details="details" options="options"
I am using ng-autocomplete directive.
https://github.com/wpalahnuk/ngAutocomplete
I want to call an angular function when an address is selected from option list
Simply use the ng-change directive. angular doc The function you will bind to it will be called everytimes a change to the ng-model occurs.
I tried several things.. ngblur="myfunction()" worked for my use case
I am using angular's typeahead, and running into trouble with ngModel.
Here is my typeahead html
<input
type= "text"
ng-model= "symbol"
placeholder= "begin typing"
typeahead= "hit.message for hit in getTypeAheadContents($viewValue)"
typeahead-loading= "loadingSymbols"
typeahead-editable= "false"
typeahead-on-select= "onSelect($item, $model, $label)"
typeahead-min-length= 2
typeahead-wait-ms= 500
class= "form-control"
/>
<input ng-click= "search()" value= "Search!"/>
Here is the code in my controller (quite basic for the time being)
$scope.search = function(){
alert($scope.symbol);
}
Now, the autocomplete code works as expected, but when I click the search button, I get the alert message "undefined"
What's even weirder is that I tried setting
$scope.symbol = "";
at the beginning of my controller, and when I click the search button without typing anything into my typeahead, I get the empty string alerted back to me, as expected. However, when I DO type something into the typeahead and again hit search, I get back "undefined" once again. So clearly, angular's typeahead is not playing very nicely with ng-model, but I'm not sure what to do here.
Advice?
Just set typeahead-editable="true" :-)
Don't know if this is still an issue for you. But I've tried the latest release of angularStrap (2.1.4) and with that I got it working when I set the ng-model to an object on which I set a property.
$scope.selectedPart = {}
<input type="text"
class="form-control"
ng-model="selectedPart.part_id"
data-animation="am-flip-x"
ng-options="part.value as part.name for part in parts"
placeholder="Selecteer onderdeel"
bs-typeahead>
Somewhere in some function (could be a deep $watch)
console.log($scope.selectedPart.part_id)
This doesn't really answer the question, but I sort of got around this issue by setting a different scope variable equal to the user's input inside the getTypeAheadContents function, and then using that variable (instead of 'symbol') inside the search function.
I want to initialize variable test on value from formErrors.field1 but it doesn't work.
{{formErrors.field1}} // show content
<input ng-model="test" ng-init="test = formErrors.field1" /> // input field is empty
{{test}} // doesn't show content
I'm using Angular version angular-1.3.0-rc.1
If the field value gets set after the page loads, maybe it could explain why you face this issue.
I use ng-init mostly to set values directly, not to copy the value of another scope variable.