Get value from HTML input element from Angularjs controller

Question

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 ?

Answer 1

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/

Answer 2

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

Answer 3

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);