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>
Related
I am using ng-repeat to loop though elements which could be numeric or object. I am trying to use condition to display number or another sub ng-repeat. Following an example of code
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="angular.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
I am very new to angular. Please help.
Try like the below code, also please check this plunker for working example.
Controller:
$scope.isNumber = angular.isNumber;
Template:
<span ng-if="isNumber(value)">Valid Number</span>
Bind the angular.isNumber function to a function in your controller.
var app = angular.module("App", []);
app.controller("vmCtrl", function () {
var vm = this;
vm.isNumber = angular.isNumber;
vm.data = {
"thing1": [1,2,3,4],
"thing2": [{
"something1a": "something1b",
"something2a": "something2b"
},
{
"somethingElse1a": "somethingElse1b",
"somethingElse2a": "somethingElse2b"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table ng-app="App" ng-controller="vmCtrl as vm">
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="vm.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
</table>
i am trying to display data in a table using angularJS ng-repeat. Data is not displayed. Here is my code : https://jsfiddle.net/807mxydL/. Thanks for your help
var custApp = angular.module('custApp', []);
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs =
[{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
};
};
HTML code:
<div ng-app="custApp">
<div ng-controller="CustomerControlleras customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>
Try like this
you have some mistakes.
1: <div ng-controller="CustomerController as customer">
2:forgot put ) in end of controller
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs = [{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="custApp">
<div ng-controller="CustomerController as customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>
My question Related to this Question at ng-repeat values with 3 columns in table? - AngularJS
Then my Question is How to Get the Value of that button on click. ?
Here is My Problem
<input type='text' ng-model="mydata" />
<span ng-bind="$parent.$eval(mydata)"></span>
$scope.buttons =[ [0,1,2,3,4],
[5,6,7,8,9]
];
<tr ng-repeat="row in buttons">
<td ng-repeat= "button in row"><button class="btn btn-primary" ng-click ="$parent.mydata = $parent.mydata.toString() + button">
{{button}}</button></td>
</tr>
It Works on a single Array. But in multiple it doesn't
You can try something like this.
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="value in array">
<button ng-click=myFunction(value,$index)> MyButton</button>
</div>
</body>
app.controller('myCtrl', function ($scope) {
$scope.myFunction = function(val,index) {
console.log(val) };
});
//assuming this is your array
$scope.data = [
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"]
];
// using ng-repeat to show all data
<table>
<tr ng-repeat="row in data">
<td ng-repeat="column in row" ng-click="somefunction('{{column}}')">{{column}}</td>
</tr>
</table>
THEN PASS IT TO THE CONTROLLER AND GET THE VALUE THERE..
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'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>