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