El DIX El DIX - 1 year ago 70
Javascript Question

Display table row data as Modal with ng-repeat

I need help with displaying row data using modal when the row is clicked. At the
moment it displays on the next row. It has to display the same data as a modal. I also need help on the return list, how can use URI/URL or rather point to a JSON file in there and avoid hard-coded data. Attached is a piece of code that explains what I have.


<table ng-controller="UsersCtrl" class="table table-striped">
<tr ng-repeat-start="user in users" ng-click="selUser(user)">
<tr ng-repeat-end ng-if="isSelected(user)">
<td colspan="2">{{user.desc}}{{user.name}}{{user.age}}</td>

<!-- display row details using modal -->


return {
return [
{name:'John',age:25,desc:'Software Developer at MacroSoft LLC'},
{name:'Jonatan',age:26,desc:'Professor at University of Tashkent'},
{name:'Nataly',age:27,desc:'Nurse at central hospital'},
{name:'Lucy',age:28,desc:'Teacher at district school'}

<!-- how do I use a URI/URL in here or point to a JSON File? -->

return $scope.selected_user===user;

Answer Source

1st Question: You need to open some popup modal to show the selected user . On your selUser() function you can open popup where selected_user data is shown. Also you have to remove second row in table body this makes no sense.

<tr ng-repeat="user in users" ng-click="selUser(user)">

2nd Question: For querying data from JSON file your have to create a javascript file for ex : data.json and include this with script tag.

 <script type="text/javascript" src="data.js"></script>

In data.js will include json for user

var data = [{ name: 'John', age: 25, desc: 'Software Developer at MacroSoft LLC' },
{ name: 'Jonatan', age: 26, desc: 'Professor at University of Tashkent' },
{ name: 'Nataly', age: 27, desc: 'Nurse at central hospital' },
{ name: 'Lucy', age: 28, desc: 'Teacher at district school' }];

In this way you will get the json from file.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download