Getting td value and print it in input text by jquery

Question

I get the following td value and print it in input text by jquery it works well,but when trying to use this value by ng-model angular it get null value ,it just works when I type a value in textbox by hand not by jquery code.

$(document).ready(function() {
$("div.contacts").on('click', "table tr td.contactIdTD", function() {
    $("#contactId").val($(this).text());
  });
});

td value

<td class="contactIdTD">10000</td>

input text

<input type="text" id="contactId" class="form-control" ng-model="contactId">

Are you sure you are getting the contectIdTD value on click with $(this).text()? In general, you shouldn't really mix jQuery with angular like that. — Bardh Lohaj, Feb 04 '15 at 14:40
You are missing something and I can't see what because you didn't post all of your code. Here is the implementation which works fine: [JSFiddle](http://jsfiddle.net/bardhlohaj/pgzxyybp/) — Bardh Lohaj, Feb 04 '15 at 14:46

score 0 · Answer 1 · edited May 23 '17 at 11:57

Here is the solution with your approach:

JSFiddle

Here is how you should implement it(you shouldn't use jQuery as you don't need it, suggested reading):

Implement a method on your controller:

$scope.selectContact = function(contactId){
    $scope.contactId = contactId;
}

Call that method using ng-click on your views:

<td class="contactIdTD" ng-click="selectContact(2)">2</td>

Here is the solution:

JSFiddle

score 0 · Answer 2 · answered Feb 04 '15 at 15:07

The problem is not with the declaration. Could be the structure of your code. To help troubleshoot

Check that the contactId is inside the angular controller or within the scope of your application

<div ng-controller="ContactController"> ... <input type="text" id="contactId" class="form-control" ng-model="contactId"> ... </div>
Initialise contactId in your controller

$scope.contactId = "";

Getting td value and print it in input text by jquery

2 Answers2