I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition effect.
HTML:
<div ng-controller="dogCtrl">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dog in dogs">
<td>{{dog.name}}</td>
<td>{{dog.breed}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="3">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</td>
</tr>
</tbody>
</table>
</div>
Controller:
var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
$scope.isCollapsed = true;
$scope.dogs = [
{
name: "Sparky",
breed: "Parson Russell Terrier"
}, {
name: "Shep",
breed: "German Shepard"
}
];
});
Codepen Example: http://codepen.io/anon/pen/qEoOBq
Since the height of a table cell is “the minimum height required by the content” (as in CSS 2.1 rules) I guess you can't animate the table row height.
Probably the workaround involves wrapping the content of the cell into a div element and animating this container as well.
This worked for me but I have not tested heavily:
<tr ng-repeat-end="">
<td colspan="2" style="padding: 0">
<div collapse="isCollapsed">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</div>
</td>
</tr>
Its a known issue for angular animations on table rows.
https://github.com/twbs/bootstrap/issues/12593
The best way to do it is shown here.
<tr ng-click="row1Open = !row1Open">
<td>Acrylic (Transparent)</td>
<td>{{row1Open}}</td>
<td>foo</td>
</tr>
<tr class="collapse-row">
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
Detail Row {{demo.hello}}
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
abc
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
$2.90
</div>
</div>
</td>
</tr>
Related
I have a html/angularjs table that contains the ff :
<tbody ng-repeat="x in Persons">
<tr>
<td>{{x.FirstName}}</td>
<td>{{x.LastName}}</td>
<td>{{x.Department}}</td>
<td>
<a href"#" data-ng-click="x.show = !x.show">
Sales Details
</a>
</td>
</tr>
<tr>
<td ng-show="x.show">
<!--user sales details here-->
</td>
</tr>
</tbody>
Currently, if I click on the first row it shows the details but I need to click it again to hide it. I want to hide the first row details if the 2nd row is clicked. How do I go about this?
Try this. i hope this what exactly what you want.
var app = angular.module("app", []);
app.controller("name", function($scope) {
$scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
$scope.showorhide = function(index){
var currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
<tr>
<td>First Name</td>
<td>
<a href"#/" style="color:red" ng-click="showorhide($index)">
open/close
</a>
</td>
</tr>
<tr ng-show="x.show">
<td >
{{x.FirstName}}
</td>
</tr>
</tbody>
</table>
</div>
you need a method for this
take a look
https://stackblitz.com/edit/js-tv6dog?file=index.js
js:
$scope.clicked = function(index){
let currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
html
<td>
<a href"#" data-ng-click="clicked($index)">
Sales Details
</a>
</td>
and of course add track by to ng-repeat
<tbody ng-repeat="x in Persons track by $index">
I have a list of images saved in var images, and a list of names saved in var searchName, now I need to display images along with name, but I could display it after all images displayed only.
HTML:
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
</tr>
<tr ng-repeat = "item in searchName">
<td>{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
How about merge this two into single Array and use ng-repeat.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.images = ['https://angularjs.org/img/AngularJS-large.png', 'http://build.acl.com/assets/tech-logos/angular-03fcc4cfc89d9b310265e7d1e01ee0aef405abf6c632f59342b18848e1c02587.svg'];
$scope.searchName = ["Angular-Logo", "Angular-SVG-Image"];
$scope.intrArr = mapImageAndName();
function mapImageAndName() {
var mappedArr = [];
for (var i = 0; i < $scope.images.length; i++) {
mappedArr.push({
'image': $scope.images[i],
'name': $scope.searchName[i]
});
}
return mappedArr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row col-sm-12" ng-app="app" ng-controller="controller">
<table class="displayImg col-sm-3">
<tr ng-repeat="obj in intrArr">
<td>
<img ng-src="{{obj.image}}" class="imageShow" />
</td>
<td>
{{obj.name}}
</td>
</tr>
</table>
</div>
You could use nested ng-repeat.
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td ng-repeat = "item in searchName">
{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
Look into AngularJS ng-repeat document.
There is a term called ng-repeat-start and ng-repeat-end
AngularJS ng-repeat Document
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td>{{searchName[$index][0].profileInfo.firstname}} </td>
</tr>
I have a table inside a bootstrap-modal which has overflow set to auto so that it scrollable. However I need to load a lot of data so I would like to implement lazy-loading using ngInfiniteScroll. I have tried using the infinite-scroll-container attribute but it's still triggering constantly. Here is a code-snippet:
<div class="modal-body">
<table class="table" id="msds-table" ng-show="vm.modalViewLoaded" infinite-scroll="vm.log()" infinite-scroll-container='"#msds-table"'
infinite-scroll-disabled="!vm.modalViewLoaded">
<thead>
<tr>
<th>CODE</th>
<th>TYPE</th>
<th>PRODUCT</th>
<th>ONBOARD</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sheet in vm.datasheets | filter:onboardQuery | filter: (notOnBoardOnly ? {onboard:false} : {onboard:any})">
<td>{{sheet.code}}</td>
<td>{{sheet.type}}</td>
<td>{{sheet.product}}</td>
<td>
<span class="checkbox">
<input type="checkbox" data-ng-model="sheet.onboard" data-ng-value="sheet.onboard">
</span>
<span data-ng-show="!sheet.onboard">Click to select</span>
<us-list-select ng-model="sheet.located"
data-ng-show="sheet.onboard"
options="{list:vm.storageLocations}">
</us-list-select>
</td>
</tr>
</tbody>
</table>
<div ng-show="!vm.modalViewLoaded" style="text-align:center;padding-top:20px;">
<img src="images/ajax-loader.gif">
</div>
</div>
Any ideas?
i don't understand what my ng-show not working when i click on my button with ng-click...
thanks for help.
<div ng-show="showMe == 1">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="showMe = 1">Ajouter</button>
</div>
</td>
</tbody>
</table>
The answer of gtlambert is true. However if you have more than one level of ng-repeat or another directive that does the same thing you'll have trouble.
To not have any trouble use objects like this :
$scope.params = {showMe:0};// init in controller
<div ng-show="params.showMe == 1">
<button ng-click="params.showMe = 1">
This will always works whatever the number of ng-repeat/directive you use.
When you use ng-repeat this creates a new scope. To access the main controller scope from inside the ng-repeat you need to use $parent.
So, change your ng-click to $parent.showMe = 1 and this will fix the problem:
<button ng-click="$parent.showMe = 1">Ajouter</button>
Here you go. I have a working example. showMe becomes a member of your controller.
function ShopController() {
this.showMe = false;
this.tableProduct = [{
id: 1,
name: "Bar"
}];
}
angular.module('app', [])
.controller('ShopController', ShopController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ShopController as shopCtrl">
<div ng-show="shopCtrl.showMe">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="shopCtrl.showMe = true">Ajouter</button>
</div>
</td>
</tbody>
</table>
</div>
I have checkboxes with table headers, i want to hide the table columns and rows based on the checkbox click,
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked=='true'">Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
I tried but no luck.
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked"><a>Activity ID</a></th>
//here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.
//keep in mind i assume {{checked}} returns only bool value
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
Working fiddle for your : http://jsfiddle.net/b69pkeLd/1/
Let me know if any issue occurs.
I hope this is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.fieldvalues = [
{text: 'Test1', checked: false},
{text: 'Test2', checked: false}
];
$scope.makerQueueData = [
'Whatever your', 'data is'
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="opt in fieldvalues">
<input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
<label for="checkbox-{{$index}}">{{opt.text}}</label>
<table ng-show="opt.checked">
<tr>
<th>Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="opt.checked'">{{$index}}</td>
<td>{{nm}}</td>
</tr>
</table>
</div>
</div>
Moreover, use <label> for type="checkbox" description. This makes the label clickable.