CODEWITHSUNDEEP
javascriptjqueryangularjs
pandu das
pandu das

Reputation: 230

Angular Js : How to get input value using AngularJS functions

I want to access form input value in services.

var emailId = document.getElementById("save_quote_email").value;
console.log("emailId="+emailId);
console.log("emailId2="+angular.element('#save_quote_email').val());

I am able to get value using document.getElementById("save_quote_email").value but not using angular function angular.element('#save_quote_email').val()

It gives error

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element http://errors.angularjs.org/1.2.16/jqLite/nosel

Please view this plunker http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview for complete code.

in dtoresource.js line numbe2 21.

Upvotes: 0

Views: 821

Answers (2)

johan
johan

Reputation: 1012

Instead of trying to answer your question I am going to rather direct you to the correct way of using Angular. You should never try and select input values, that is what ng-model is for. ng-model bind the input to a value. As soon as the value changes Angular automatically updates the scope value, no functions of getting data necessary.

I can't make heads or tails out of your plunkr code but you should not do this:

var queryResult = document.querySelector('#save_quote_email');

Also you are trying to access the DOM from a factory, you should rather pass the needed value to an exposed function of the factory and call the function in your controller.

In your controller autoQuoteCtrl you should use a simply scope value for your input like so:

$scope.email = "";

And in your index the input should read:

<input type='text' ng-model="email" />
{{ email }}

Do not use convoluted variables like AutoQuote.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress in your scopes, you should assign the values when they are received from the resource.

$http({url: url}).then(function (rs) {
    $scope.email = rs.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress;
}

Upvotes: 0

jitender
jitender

Reputation: 10429

You can't use angular.element to select by id or some other selector Link provide by you give full info as below

"Note: Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll()"

you may use document.query selector as follow

    var queryResult = document.querySelector('#save_quote_email');
    var emailId2 = angular.element(queryResult);

Here is working plunker http://plnkr.co/edit/mC0JKTZpdnvqyBpihLRW?p=preview

Also this https://stackoverflow.com/a/23626251/5621827 will help you to understand it batter

Upvotes: 1

Related Questions