Displaying json data in input field with AngularJS

Question

I would to display JSON data in html input fields using AngularJS. Here's the code.

I have two HTML files. First HTML file contains a table which displays the json data. When you click in a row then it opens a modal window with a form (second HTML file).

Here's the Code: JSON data

var examples = [
   { 'id': '1', 'fname': 'john' },
   { 'id': '2', 'fname': 'bonnie' },
   { 'id': '3', 'fname': 'joey' }
];

Here's the Code: (First HTML file)

...
<tr ng-repeat="item in examples" ng-click="open(this.item)">
   <td>{{ item.id }}</td>
   <td>{{ item.fname }}</td>
</tr>
...

Second HTML file:

...
    <input type="text" class="form-control" placeholder="ID" id="firstVal" value="">
...

My Controller:

...
$scope.open = function (item) {
   console.log(item.id);
   $("#firstVal").val(item.id);
};
...

It doesn't insert the value "id" in the input field. How can I do this with AngularJS or jQuery?? In the console I'm getting the value of id.

how do I think in angular if i have jquery background... get away with ids.. thats not how you work in angular... using $(#...) in angular is never never needed... — harishr
– harishr, Commented May 5, 2015 at 9:14
Try: placeholder="{{item.id}}", no need for JQuery as pointed out above — Jax
– Jax, Commented May 5, 2015 at 9:22

harishr · Accepted Answer · 2015-05-05 09:15:46Z

6

<input type="text" class="form-control" placeholder="ID" ng-model="selectedId">

and

$scope.open = function (item) {
   console.log(item.id);
   $scope.selectedId = item.Id
};

answered May 5, 2015 at 9:15

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yuro Over a year ago

Hej entre.. I've tried your solution but it doesn't work. In the modal window the inputfield is remaining empty.

harishr Over a year ago

Do you have different controllers?? Is your console.log working??

yuro Over a year ago

I've found the problem. in my controller I've forgotten in my modalInstance variable the point resolve: { selected: function() { return $scope.selectedId }}

harishr Over a year ago

thats where I was coming to... if you have different controllers, then you would need to pass the data between them..

Alex · Accepted Answer · 2015-05-05 09:47:28Z

2

Also, make sure your second HTML is using the same controller (shared scope). Moreover, it is always advised to use a dot notation when accessing scope items. In this case you would suggest the same as entre but with a minor modification:

$scope.open = function (item) {
   $scope.selectedObj.id = item.Id
};

And in the form HTML (once you have the same controller working there):

<input type="text" class="form-control" placeholder="ID" ng-model="selectedObj.id">

UPDATE Here's a working fiddle for you: https://jsfiddle.net/aqs9vLd8/1/ Note how $scope.selectedObj needs to be initialized first as an object (empty).

Let me know if it works for you

edited May 5, 2015 at 9:47

answered May 5, 2015 at 9:32

Alex

4894 silver badges19 bronze badges

1 Comment

yuro Over a year ago

Thx Rhaziel for your post. I've found my solution. You can read it in my last comment above. :)

Collectives™ on Stack Overflow

Displaying json data in input field with AngularJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related