javascript - Display table row data as Modal with ng-repeat -
i need displaying row data using modal when row clicked. @ moment displays on next row. has display same data modal. need on return list, how can use uri/url or rather point json file in there , avoid hard-coded data. attached piece of code explains 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 @ macrosoft llc'}, {name:'jonatan',age:26,desc:'professor @ university of tashkent'}, {name:'nataly',age:27,desc:'nurse @ central hospital'}, {name:'lucy',age:28,desc:'teacher @ district school'} <!-- how use uri/url in here or point 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; } });
1st question: need open popup modal show selected user . on seluser() function can open popup selected_user data shown. have remove second row in table body 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: querying data json file have create javascript file ex : data.json , include script tag.
<script type="text/javascript" src="data.js"></script> in data.js include json user
var data = [{ name: 'john', age: 25, desc: 'software developer @ macrosoft llc' }, { name: 'jonatan', age: 26, desc: 'professor @ university of tashkent' }, { name: 'nataly', age: 27, desc: 'nurse @ central hospital' }, { name: 'lucy', age: 28, desc: 'teacher @ district school' }]; in way json file.
Comments
Post a Comment