I'm trying to get the value from an HTML element from Angular controller.
<div ng-app="myApp" ng-controller="myControler">
<br />
<input id="Text1" type="text" runat="server" value="aValue" /
My controller :
var myApp = angular.module('myApp', []);
myApp.controller("myControler", function ($scope, $document) {
var name = angular.element($('#Text1')).val();
console.log(name);
});
But name returns "undefined"...
Please, what I'm doing wrong ?
angular.element is an alias for jquery $.
You could access that element like this: angular.element('#Text1').val();
ng-model is the angular way to do this though. You can set the value from ASP using ng-init
<input id="Text1" type="text" runat="server" ng-model="inputVal" ng-init="inputVal='aVal'">
And this can be accessed from the controller using the scope console.log($scope.inputVal);
JSfiddle example: http://jsfiddle.net/n1oppeu2/
Why you need angular element to access form element ??
You can get and set value by binding model to it
like this
<input id="Text1" type="text" runat="server" ng-model="input.field1" />
controller
$scope.input={
field1:''
}
Using angular element selector #
<input id="Text1" type="text" runat="server" value="aValue" />
console.log(angular.element('#Text1').val());
or
console.log(angular.element('#Text1')[0].value);
Related
I need to be able to see in the Angular controller if the datepicker is pristine or not. Tried all sorts of things including sending the pristine value in a method but cannot get this value. Below is the view code:
<form name="myForm">
<!-- Datepicker From -->
<div class="small-6 medium-5 large-2 columns" ng-if="vm.subViewActive">
<div class="input-group">
<input name="valuationDatePickerFrom" ng-model="name" type="text" class="datepicker" id="valuationDatePickerFrom" placeholder="DD/MM/YYYY" pikaday="vm.datePickerFrom" on-select="vm.selectStartDate(pikaday)" year-range="{{ vm.yearRange }}" >
<div class="input-group-addon">
<label for="valuationDatePickerFrom" class="postfix">
<i class="fa fa-calendar"></i> From
</label>
</div>
</div>
</div>
</form>
and then I also tried :
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
in my controller but cannot get the pristine value. Read lots of posts here but mainly to do with CSS classes and front-end control or setting the pristine state from the backend not getting or checking the pristine state.
Thanks anybody that can help.
You are using:
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
but your form's name is not myForm.
Change <input name="name"... <input name="valuationDatePickerFrom"...
Then you can use:
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
Also, the controller is getting called before the view is created, so no myForm exists at the time the controller runs. Try adding a $timeout like so:
$timeout(function() {
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
}, 100);
plunkr
The above solution only works on page load, but you need to know this value when the page is being used. Instead pass the value to the controller when an action happens:
<form name="myForm">
<input type="text" name="valuationDatePickerFrom" ng-model="valuationDatePicker" ng-blur="alerty(myForm.$pristine)">
</form>
.controller('MainController', function($scope) {
$scope.alerty = function(isPristine){
alert('isPristine: ' + isPristine);
};
https://plnkr.co/edit/f0EWvYmoXCn8UOH3QCfE?p=preview
How'd I get the value to controller from a nested view? I'd like to mention that I have a recursive approach.
HTML
<textarea ng-model="inputValue" class="ng-valid ng-dirty ng-valid-parse ng-touched"></textarea>
Full HTML structure can be found here
Edit:
I want to get the value of the textarea in my controller. (e.g. $scope.inputValue ); currently getting undefined
see this jszfiddle
http://jsfiddle.net/7qbucc62/
<div ng-app="app">
<div ng-controller="firstController">
<textarea ng-model="inputValue"></textarea>
<textarea ng-model="inputValue"></textarea>
</div>
</div>
<script>
(function abc()
{
var app=angular.module("app",[]);
app.controller("firstController",function($scope)
{
$scope.inputValue="";
});
})();
</script>
I think this is what you are asking
you can use $scope.inputValue directly in your controller. It will provide you the value of textarea
I am using angularjs for one of the my module in application. I want to update UI of various locations on page, so that all ui components will work synchronously as the model value changes.
here is my html-
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
</fieldset>
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;" ng-controller="controller2">
<input type="text" ng-model="Model1" />
<input type="text" ng-model="Model2" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
</fieldset>
and my javascript -
var testApp = angular.module('testApp',[]);
var mainApp = angular.module('mainApp',['testApp']);
testApp.controller("controller1",['$scope',function($scope){
$scope.Model1 = "testText";
}]);
testApp.controller("controller2",['$scope',function($scope){
$scope.Model2 = "testText2";
}]);
angular.bootstrap(document, ['mainApp']);
In the html for first fieldset it is working properly. But in second fieldset it is not. So can anyone please tell me how do i achieve the functionality of first fieldset in second fieldset.
Thanks.
use $rootScope instead of $scope
Can you use ng-controller="controller2" to particular input.
Try this
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
<input type="text" ng-model="Model2" ng-controller="controller2" />
</div>
It doesn't work because you create 2 seperate scopes/instances for controller1
<div>
// Root scope
<div ng-controller="controller1">
// Child scope A
// scope = new controller1();
</div>
<div ng-controller="controller1">
// Child scope B
// scope = new controller1();
</div>
</div>
You can solve this problem by using the $rootScope directly or by creating a service. The recommended way is to avoid $rootScope whenever possible and use a service instead.
Value is probably the easiest way to create a service. Note that you can also use .service or .factory. Read more in the documentation about services.
testApp.value('myValue', {
data: 'testText'
});
I'm using an object here so we can use this as a reference to the value, this is important for sharing data between controllers. If you want to know why then read more about reference & value types.
Now inject this service into your controller and use this data instead:
testApp.controller("controller1",['$scope', 'myValue',function($scope, myValue){
$scope.Model1 = myValue;
}]);
On the view we need to update the bindings to the reference of the service:
<input type="text" ng-model="Model1.data" />
JSFIDDLE
USE THE DOT! ng-model without "." is bad.
Please read this
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
The issue is fully described there.
I am trying to access the model of a form element that is using validation (e.g. ng-minlength).
It seems that the model is undefined until the validation passes.
Is this the intended behaviour? How can I access a non-valid model?
Example: http://jsfiddle.net/ybdssvt5/
<div ng-app="myapp">
<form name="myForm">
<input type="text" ng-minlength="5" ng-model="formData.email" required/>
<div>EMAIL length: {{ formData.email.length }}</div>
</form>
</div>
EMAIL length cannot be displayed until validation passes.
you can plug in a controller and assign a default value,
var app = angular.module('myapp', [])
.controller('appCtrl', function($scope){
$scope.form = {};
$scope.form.email = '';
});
This is a dirty way, but you can improvise from here easily.
Also you need to add ng-controller="appCtrl" to your ng-app div or form.
I have created a button, that when it is clicked I want to get the text from a textarea. Here is the html.
<div class="text-area-container">
<textarea id="chatBox" class="chat-box" rows="2"></textarea>
</div>
<div class="button-container btn-group btn-group-chat">
<input id="comment" ng-click="chat($event)" class="btn" value="Comment"/>
</div>
And here is my controller
$scope.chat = function($event) {
var button = $event.currentTarget;
};
I get the button from the $event, but how do I get the textarea. I know that I can jQuery it, but that is not the Angular way. How do i do it without jQuery?
Add ng-model to text area, like:
<textarea id="chatBox" class="chat-box" rows="2" ng-model="textModel"></textarea>
In controller write $scope.textModel = "";
Demo Fiddle
Angular is two way data binding. Setting ng-model will chain textarea value with controller var.
On controller side:
$scope.textArea = "";
On view side:
<textarea [...] ng-model="textArea">[...]</textarea>
On your controller, $scope.textArea will always contain textarea content.
You're looking for ng-model.
<textarea ng-model="text" id="chatBox" class="chat-box" rows="2"></textarea>
access it with $scope.text in js or {{text}} in view.
Well if you need to know only text area's value I guess it should be binded to some $scope model variable via data-ng-model="MyTextValue":
<textarea id="chatBox" data-ng-model="MyTextValue" class="chat-box" rows="2">}</textarea>
so in $scope.chat function you can get access to $scope.MyTextValue.
You can also enable/disable or show/hide control via ng-* attibutes too. In most cases it is enough.