Change collapse data-target and id automatically - angularjs

Inside an ng-repeat I have a table in which I display information using Bootstap collapse, however I need the id to be changed with the loop in order for the data to be displayed in the right place, with my current code it keeps displaying in the same row with each click, here is my code :
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" data-target="#d">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="d" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>

I believe you wanted to do something like:
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" ng-attr-data-target="#{{p.IdProjet}}">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul ng-attr-id="{{p.IdProjet}}" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>

Related

Ng-show not showing product's detail

I'm making an exercise about the AngularJS, and i created a table that will load the data from database, i have a "Detail" button, when i click on that button, it will assign a new row below the row which contain a button i clicked. It's work fine but the problem is when i click the "Detail" button, it the detail of all, i just want it to show the detail of which product i clicked.
Here is my HTML code:
var app = angular.module("dataApp", []);
app.controller("dataExcuteController", function ($scope, $window,$http) {
$http.get('http://localhost:8080/sachonline/public/administrator/theloai/dstheloai').then(function (response) {
$scope.theloai = response.data.message.ds_theloai;
$scope.isLoading = false;
});
$scope.detailtheloai = function (item) {
$scope.showdetail = true;
};
});
<body ng-app="dataApp" ng-controller="dataExcuteController">
<div class="container">
<table class="table table-bordered">
<thead class="text-center">
<th>STT</th>
<th>Tên thể loại</th>
<th>Trạng thái</th>
<th>
<span><i class="fa fa-cog text-muted"></i></span>
</th>
</thead>
<tbody ng-repeat="item in theloai">
<tr>
<td class="text-center">#{{ item.tl_ma }}</td>
<td>#{{ item.tl_ten }}</td>
<td class="text-center" ng-if="item.tl_trangThai==1">
<span><i class="fa fa-check-circle text-success"></i></span>
</td>
<td class="text-center" ng-if="item.tl_trangThai==0">
<span><i class="fa fa-times-circle text-danger"></i></span>
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-warning text-white mr-3 pt-0 pl-2 pr-2" ng-click="detailtheloai(item)"><i class="fa fa-info-circle"></i></button>
<button type="button" class="btn btn-sm btn-success text-white mr-3 pt-0 pl-2 pr-2" data-toggle="modal" data-target="#editForm" ng-click="edittheloai($index)"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-sm btn-danger text-white pt-0 pl-2 pr-2" ng-click="removetheloai($index)"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr ng-show="showdetail">
<td colspan="4">
<table class="table table-info table-bordered">
<tbody>
<tr>
<th class="text-right">Mã thể loại:</th>
<td>#{{ item.tl_ma }}</td>
</tr>
<tr>
<th class="text-right">Tên thể loại:</th>
<td>#{{ item.tl_ten }}</td>
</tr>
<tr>
<th class="text-right">Trạng thái:</th>
<td class="text-center" ng-if="item.tl_trangThai==1">
<span><i class="fa fa-check-circle text-success"></i></span>
</td>
<td class="text-center" ng-if="item.tl_trangThai==0">
<span><i class="fa fa-times-circle text-danger"></i></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script src="{!!asset('js/showlist.js')!!}"></script>
</body>
You need to store the show value for every item, therefore I propose you this changes:
js:
$scope.detailtheloai = function (item) {
item.showdetail = true;
};
html:
<tr ng-show="item.showdetail">

ui-sref include parameter in ng-repeat loop

I have this table:
<table class="table tenant-table text-center">
<thead>
<tr>
<th class="text-center">
<i class="fa fa-per"></i> Date
</th>
<th class="text-center">
<i class="fa fa-calendar"></i> Result
</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in loanapps track by $index">
<td data-th="Date">{{v.ApplicationDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td data-th="Result">
<a ng-if="v.LoanStatus == 'Approved'" ui-sref="approved({loanid: {{v.ApplicationId}}})" class="btn dark btn-sm btn-outline sbold uppercase">
<i class="fa fa-share"></i> View
</a>
</td>
</tr>
</tbody>
</table>
I'm trying to include a parameter, the application id for the approved redirect but I'm not able to include that value in the url. Is the ui-sref approach I'm taking correct or I need to do some tweak?
Just had the same issue. Hopefully I figure out a better way to do it, but for now this will work:
approved({loanid: '{{v.ApplicationId}}'})

angular-bootstrap 2 paginations, issue in second pagination

image showing paginations
I have item list with many tables in which initaily i show headers by loop each table header works as accordion and on click any table header one request send to get data for that header and tbody populate accordingly.
I have applied pagination on headers and its working fine but pagination on any tbody not working.
Below I have mentioned HTML code.
<div class="col-md-12">
<!-- start table one -->
<div class="table table-responsive series-tbl series-tbl-m">
<table data-ng-repeat="series in serieses track by series._id" class="table table-striped" id="headingOne">
<thead class="table-blue">
<tr >
<th width="5%"><input ng-click="checkAllTalks(series._id,series.Selected)" ng-model="series.Selected" selected="{{series.Selected}}" type="checkbox"></th>
<th width="28%">{{series.title}}</th>
<th width="22%">{{series.totalCount || 0}} talks</th>
<th width="15%">{{ series.totalDuration || 0 | timestring }}</th>
<th width="15%">${{series.totalPrice || 0}}</th>
<th width="18%" class="th-action-icon">
<!-- <i class="fa fa-plus"></i> -->
<a ng-click="openUpdateSeriesModal('md',series._id)" href="#"><i class="fa fa-pencil"></i></a>
<i class="fa fa-trash"></i>
<a role="button" ng-click="showTalks(series._id)" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-caret-down"></i></a>
</th>
</tr>
</thead>
<tbody id="series-{{series._id}}" class="panel-collapse collapse in dn allSeriesTalks" role="tabpanel" aria-labelledby="headingOne">
<tr ng-repeat='talk in seriesTalks track by talk._id'>
<td><input ng-click="checkUncheckTalk(talk._id,talk.Selected)" ng-model="talk.Selected" selected="{{talk.Selected}}" type="checkbox"></td>
<td>{{talk.title}}</td>
<td>{{talk.duration || 0 | timestring }}</td>
<td>{{bytesToMB(talk.size) || 0}} mb</td>
<td>${{talk.price || 0}}</td>
<td class="action-item">
<!-- <i class="fa fa-plus icon-gray"></i> -->
<a ng-click="openUpdateTalkModal('md',talk._id)" href="#"><i class="fa fa-pencil icon-gray" ></i></a>
<a ng-click="deleteTalk(talk._id)" href="javascript:void(0);"><i class="fa fa-trash icon-gray"></i></a>
</td>
</tr>
<tr>
<td colspan="6">
<div data-ng-if="totalTalkCount> 10" class="col-md-12">
<div pagination total-items="totalTalkCount"
ng-model="currentTalkPageNo"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="talkPageChanged(currentSeriesId)"></div>
</div>
<div data-ng-if="totalTalkCount == 0" class="col-md-2">
<div>No record Found.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- end table one -->
</div>
<div class="col-md-12">
<div pagination total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="pageChanged()"></div>
</div>
And below controller code
//first it is working properly
vm.currentPage = 1;
vm.maxSize = 5;
vm.pageChanged = function () {
console.log('page changed:', vm.currentPage);
vm.getSeriesList();
//$scope.getMembers();
};
//second its not working
vm.currentTalkPageNo = 1;
vm.talkPaginate = false;
vm.talkPageChanged = function (seriesId) {
console.log('page talk changed:', vm.currentTalkPageNo);//each time it shows 1 page no
vm.talkPaginate = true;
vm.showTalks(seriesId);
//$scope.getMembers();
};
remove below code
data-ng-if="totalTalkCount == 0"
in pagination parent div to
data-ng-class="{ 'dn':totalTalkCount <= 10}"
And use
ng-model="$parent.currentTalkPageNo"
instead of
ng-model="currentTalkPageNo"
css
.dn{display:none;}

How to divide rows to two table with angularjs

how to divide rows to two tables with angularjs
<tr ng-repeat="field in node.fields track by $index" ui-tree-node="" class="ng-scope angular-ui-tree-node" collapsed="false" ng-if="$even">
I have tried this but it is not working for drag and drop
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>

Dynamic JSON handling in angularJS

I've got two JSON arrays, one for headers and the other for data. I'm handling the headers, and I'm trying to display the data with respect to those headers using nested ng-repeat, but it results in empty rows.
The JSON arrays and the html code for displaying the data are pasted below.
Please help me.
$scope.data=[{'first_name':'ruth','last_name':'vick','email':'ruthvick#gmail.com','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'rahul#gmail.com','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'vicky#gmail.com','isMarried':'no','nick_name':'vicky'}]
$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
<div>
<table class="table table-bordered table-hover">
<thead class="wrapper">
<tr>
<th ng-repeat="data in header">
<div class="col-md-9">{{data.displayName}}</div>
<div class="col-md-1">
<button href="" ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
</div>
<div class="dropdown col-md-1" >
<button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
</ul>
</div>
</th>
<th><div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Add Columns
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="active" ng-repeat="row in data">
<td ng-repeat="fields in headerAll">
{{row.fields.field}}
</td>
</tr>
</tbody>
</table>
</div>
Here, row.fields.field is creating empty rows.
Try to access with braces and not the dot operator.
data:
<div ng-repeat="obj in data">
{{ obj["first_name"]}}
{{ obj["last_name"]}}
</div>
header
<div ng-repeat="obj in headerAll">
{{ obj["field"]}}
{{ obj["displayname"]}}
</div>

Resources