I want to have a table with headers and data dynamically loaded from object of two arrays. Unfortunately, these rows aren't displayed.
http://jsfiddle.net/x7ur9u07/4/
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<tr>
</thead>
<tbody>
<tr ng-repeat="inout in inoutContainer track by $index">
<td>{{ inout.input_vector[$index] }}</td>
<td>{{ inout.output_vector[$index] }}</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
window.alert('hello');
$scope.inoutContainer = {input_vector: ["0.0","0.0"], output_vector: ["0.0","0.0"]};
$scope.name = 'Superhero';
}
I managed to figure out a way to make it work -- you had a number of syntax errors that angularJS didn't understand
http://jsfiddle.net/x71jm9r8/
Basically I simplified the angularJS code
then added the ng-app directive to the container div
removed the track by $index part of the ng-repeat directive,
and finally added the myApp.controller() declaration.
Related
I have an array of object, which I am showing in table through ng-repeat.
<table>
<thead>
<tr>
<th ng-repeat="col in columnHeaders">{{col}}</th> //['Name', 'Bank Name','Code', 'Type','Status'];
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col]}}</td> //['name', 'bankName','code', 'type','isActive'];
</tr>
</tbody>
</table>
I am using ng-repeat in <th></th> and <td></td> too. But my columnHeaders name and row property(columnRows) names are different. I want to change my property name to same as column header name while using ng-repeat on <td></td> tag.
I am thought of using alias 'as' but not sure how to use it for each element.
Can anyone help me?
Instead of using two columnRows and header rows(array of string) , make a single array of keyHash(column data key and header string )
check running fiddle for this
and code be like :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<th ng-repeat="col in columnRows">{{col.displayStr}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col.key]}}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.columnRows = [
{key:'name',displayStr:'Name'},
{key:'bankName',displayStr:'Bank Name'},
{key:'code',displayStr:'Code'},
{key:'type',displayStr:'Type'},
{key:'isActive',displayStr:'Status'}
]
$scope.data = [
{
name:'James',
bankName:'RBL',
code:'1234',
type:'Saving',
isActive:true
},
{
name:'Riyan',
bankName:'DSB',
code:'1234',
type:'Current',
isActive:true
}
];
});
</script>
</body>
</html>
I have a simple Angular.js application that grabs tabular data from a mysql database and shows it in a simple bootstrap table. I’m using this code below to show the table column names without hardcoding them individually…
HTML:
<table class="table">
<thead>
<tr style="background:lightgrey">
<th ng-repeat="column in columns"> {{ column }} </th>
</tr>
</thead>
and in the controller I create ’$scope.columns’ with something like this…
var columnNames = function(dat) {
var columns = Object.keys(dat[0]).filter(function(key) {
if (dat[0].hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
return columns;
};
DataFactory.getTables(function(data) {
$scope.columns = columnNames(data);
$scope.tables = data;
});
And this works as expected and it’s great, but what about the the rest of the data.. So for example, the body of my table currently looks like this…
HTML:
<tbody>
<tr ng-repeat="x in tables ">
<td> {{ x.id}} </td>
<td> {{ x.name }} </td>
<td> {{ x.email }} </td>
<td> {{ x.company }} </td>
</tbody>
I’ve tried using two loops like this…
HTML:
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat=“column in columns”> {{ x.column }} </td>
</tr>
</tbody>
But this code doesn’t work, So is it possible to populate a table with angular without hardcoding the column names in HTML, and if so whats the most efficient way to do so?
You might want to try this https://jsfiddle.net/8w2sbs6L/.
<div data-ng-app="APP">
<table ng-controller="myController" border=1>
<thead>
<tr>
<td ng-repeat="column in columns">{{column}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
</tbody>
</table>
</div>
<script>
'use strict';
angular.module('APP', [])
.controller('myController', ['$scope', function($scope){
$scope.tables = [
{
"column1":"row1-column1",
"column2":"row1-column2",
"column3":"row1-column3",
"column4":"row1-column4"
},
{
"column1":"row2-column1",
"column2":"row2-column2",
"column3":"row2-column3",
"column4":"row2-column4"
}
];
$scope.columns = [
"column1",
"column2",
"column3",
"column4"
];
}]);
</script>
I want to highlight the row of a table if this table contains an element that is in a global variable.
Here is a fiddle : http://jsfiddle.net/L60L3gv9/
So
var myVar = "SWITZERLAND"
is the global variable I'm looking in the table.
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
And if the table contains it, I want to highlight the row.
Any advices ?
Here is a possible solution:
HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th> {{myVar}}
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
</tr>
</table>
CSS:
.red-background {
background-color: red;
}
JS:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myVar = "Switzerland"
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {
$scope.names = response.data.records;
});
});
Note that the server returns countries in lowercase.
Here is a jsfiddle
First, define a class which highlight the row:
tr.highlight {
background-color:#123456;
}
Then you should define a constant and inject it into the controller:
var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is
var app = angular.module('myApp', []);
app
.constant('myVar', myVar)
.controller('customersCtrl', function($filter, $scope, $http, myVar) {
$scope.myVar = myVar;
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.names = response.data.records.map(function(item) {
item.Country = $filter('uppercase')(item.Country);
return item;
});
});
});
Last, use the directive ng-class in the view:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<tr>
<th>Sr. No.</th>
<th>Menu Name</th>
<th>Child Menu</th>
</tr>
<tr ng-repeat="menus in menuList" >
<td >{{$index+1}}</td>
<td >{{menus.menu}}</td>
<td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
<a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
</td>
<td ng-if="!menus.menu_items"></td>
</tr>
</tbody>
I have understand clearly u r question ,if any row have any any child data or rows need to highlight image or any one.
Here i used image by using boostrap
This is working perfectly check once
I need to do this:
<tbody>
<tr class=“object.sibling[0]”>
<tr class=“object.sibling[1]”>
<tr class=“object.sibling[2]”>
<tr class=“object.sibling[2].child”>
<tr class=“object.sibling[2].child”>
<tr class=“object.sibling[3]”>
<tr class=“object.sibling[4]”>
however I am not sure how to keep track of two loops that are siblings. I can easily do this:
<tbody>
<tr class=“object.sibling[0]”>
<tr class=“object.sibling[1]”>
<tr class=“object.sibling[2]”>
<tr class=“object.sibling[3]”>
<tr class=“object.sibling[4]”>
<tr class=“object.sibling[2].child”>
<tr class=“object.sibling[2].child”>
but then the rows are out of order.
I found a solution that appears to work using ng-repeat-start and ng-repeat-end that visually does exctally what I want but the extra empty rows needed to end the hg-repeat start loops messes up the table when users copy paste.
<tbody>
<tr ng-repeat-start=“x in object.sibling”>
<td class=“x”>
<tr ng-repeat-start=“y in x.child”>
<td class=“Y”>
<tr ng-repeat-end=“”>
<tr ng-repeat-end=“”>
The problem is that the tr’s though they may represent children of siblings must all be on the same level as if that are all sibings. I cannot figure out how to do this with angular 1.2.15. How do I run two loops that keep track of each other that are not nested?
Hm, interesting scenario you've got. This should work:
<tr ng-repeat-start="sibling in siblings"></tr>
<tr ng-repeat-end ng-repeat="child in sibling.children"></tr>
The idea is to repeat two rows for each sibling, but the second row of each sibling is actually repeated for all of the sibling's children. So, in practice, the second row will only show up (and be repeated) if the sibling actually has children.
Here's a full example:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.siblings = [
{
children: [
{}, {}, {}
]
},
{},
{
children: [
{}, {}
]
}
];
});
<div ng-app="app">
<table ng-controller="MainCtrl">
<tr ng-repeat-start="sibling in siblings">
<td>Sibling {{$index}}</td>
</tr>
<tr ng-repeat-end ng-repeat="child in sibling.children">
<td>Sibling child {{$index}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
Notice how there are no extra <tr> elements.
I have a table where the last column in each row contains a little loading icon which I would like to display when a button inside the table is clicked.
When each table row is generated with ng-repeat, the loader shows up in every row rather than the individual one. How can I set ng-show to true or false for only the current index clicked?
Template:
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
Controller:
$scope.someAction = function(recordName) {
$scope.loading = true;
};
You can pass in the $index parameter and set/use the corresponding index. $index is automatically available in the scope of an ng-repeat.
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading[$index]">Loading...</td>
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Here's a generic sample with all the logic in the view for convenience: Live demo (click).
<div ng-repeat="foo in ['a','b','c']" ng-init="loading=[]">
<p ng-click="loading[$index]=true">Click me! Item Value: {{foo}}<p>
<p ng-show="loading[$index]">Item {{$index}} loading...</p>
</div>
There are many ways to handle this.
The problem here is that your variable loading is sharing the scope between the rows.
One approach could be use $index
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
JS
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Using a property in your object record:
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="record.loading">Loading...</td>
</tr>
JS
$scope.someAction = function(record) {
var name = record.name;
record.loading = true;
};
Best regards
The scope inside ng-repeat is different form the one outside. Actually the scope outside ng-repeat is the parent of the one inside. So the html code goes here
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="$parent.loading">Loading...</td>
</tr>