I'm currently confuse in trying to obtain the value inside a text box using jquery .value
<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">
I tried using document.getElementById('input-refcode').value to try to obtain the value but it comes out as empty on my console.
But if I tried binding it onto a on-click event, it manages to obtain the value stored inside the ng-model
$('.trigger').on('click', function(){
console.log(document.getElementbyId('input-refcode'))
});
As you can see there is a value inside the text box itself. But when you tried inspecting it, this is what came out.
<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">
If you look at there is no value inside the input textbox. I'm not sure if it has something to do with angular.js
3 Answers
You can get the scope object using element
var scope = angular.element(document.getElementById('input-refcode')).scope();
var desiredValue = scope.account.referral_code_string;
This might help you.
inject $timeout service in controller
$timeout(function(){
console.log(document.getElementById('input-refcode')); },200);
Note: Use capital B in getElementById not getElementbyId.
var app = angular.module('todoApp', []);
app.controller('TodoListController', function($scope){
$scope.$watch('referral_code_string'), function(){ console.log($scope.referral_code_string)};
console.log(document.getElementById('input-refcode').value);
});<script src=""></script>
<script src=""></script>
<div ng-app="todoApp" ng-controller="TodoListController as todoList">
<input class="input referral-code" disabled="true" ng-model="referral_code_string" ng-init="referral_code_string = 'abc'" id="input-refcode" value="abc">
</div>
