El DIX El DIX - 1 month ago 14
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.

Thanks!

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

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

</tr>
</tbody>
</table>

<script>
angular.module('App',[])
.factory('Users',function(){
return {
query:function(){
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? -->

];
}
}
})
.controller('UsersCtrl',function($scope,Users){
$scope.users=Users.query();
$scope.selUser=function(user){
$scope.selected_user=user;
}
$scope.isSelected=function(user){
return $scope.selected_user===user;
}
});





Answer

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.

$scope.selUser=function(user){
$('#detail').modal('show');
 $scope.selected_user=user;
}
<tr ng-repeat="user in users" ng-click="selUser(user)">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>

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.