I tried the code of AngularJS as follows:
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people= [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
In HTML file the code:
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
On the webpage, I can only get the table frame which I think means that the data is successfully passed. But I cannot get the table items:
<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td></td>
<td></td>
</tr>
<!-- end ngRepeat: p in people -->
</tbody>
</table>
I am just wondering if it is a bug or there is something wrong with my code, or the browser (chrome v79) does not support it.
Appendix:
I write the backend in Django and I found that if I directly run the plain HTML, the table is visible. The problem happens if I run it through a Django server. Since I am a green hand to the frontend, I am wondering if it is possible that the problem lies in the CSS file or the confliction with other local javascript?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people= [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
</script>
</body>
</html>
Kindly check if the above code is running?
I copy & paste your code to the snipped (Angulerjs version 1.7.5) and it seems like it's working.
var app = angular.module('MyApp', []);
app.controller('new_controller', function($scope) {
$scope.people = [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="p in people">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
In your question you specify that you are using django. I assume that you are using it to retrieve the people data (correct me if I'm wrong). Can you please show us how you retrieve the data? This might just be a case of async operation, so the data isn't there at the time the page is rendered.
The reason is a confliction of django and angularJS templates. The solution could be find in this question.
Related
My data:
$scope.members = [
{
projects: [...]
},
{
projects: [...]
}, ...
] // $scope.members.length == 15
My code:
<tr>
<th ng-repeat-start="member in members" ng-repeat="project in member.projects" ng-repeat-end ng-if="member.projects" >
{{project.name}}
</th >
</tr>
No element is generated. I checked the Elements in Chrome developer tool, and I found these in the <tr> tag comments like this:
<!-- ngRepeat: member in members -->
<!-- ngRepeat: member in members -->
<!-- end ngRepeat: member in members --> (x30)
I also tried this:
<tr ng-repeat-start="member in members">
<th ng-repeat="project in member.projects" ng-repeat-end ng-if="member.projects" >
{{project.name}}
</th >
</tr>
But then I have the error: Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.
Does anyone have an idea? Thanks in advance.
Updated answer:
Get only the 'projects' arrays into a new array, like so:
$scope.projectsOnly = [];//empty array
$scope.members.forEach(function(item){
$scope.projectsOnly.push(item.projects);
})
and then loop only into that array, like so:
<tr>
<th ng-repeat="project in projectsOnly " >
{{project.name}}
</th >
</tr>
Hope helps, good luck.
You should simply do this with nested ng-repeat
<tr ng-repeat="member in members">
<th ng-repeat="project in member.projects" ng-if="member.projects">
{{project.get('name')}}
</th>
</tr>
you don't need the ng-if, and you shouldn't separate the ng-repeat start/end. Just use two ng-repeats, one inside the other:
<div ng-app="app">
<table ng-controller="TestController">
<tr ng-repeat="member in members">
<th ng-repeat="project in member.projects">
{{project.name}}
</th>
</tr>
</table>
</div>
and your controller can look like this:
var app = angular.module('app', []);
app.controller('TestController', function($scope) {
$scope.members = [{
projects: [{
name: '1'
}, {
name: '2'
}]
}, {
projects: [{
name: '3'
}, {
name: '4'
}]
}];
});
I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetail.method}}
</td>
<td>{{styleRowDetail.lineRange}}
</td>
<td>{{styleRowDetail.details}}
</td>
</tr>
here's a working code.
var jsondata = [{
"shortMessage": "data 1",
"classOriginated": "data 2",
"method": "<i>data 3</i>",
"lineRange": "data 4",
"details": "<b>data 5</b>"
}];
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
$scope.styleRowDetails = jsondata;
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td ng-bind-html="styleRowDetail.shortMessage">
</td>
<td ng-bind-html="styleRowDetail.classOriginated">
</td>
<td ng-bind-html="styleRowDetail.method">
</td>
<td ng-bind-html="styleRowDetail.lineRange">
</td>
<td ng-bind-html="styleRowDetail.details">
</td>
</tr>
</table>
</div>
Hope it helps :)
Simple Example to generate multiple row using ng-repeat Directive in AngularJS.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<table>
<tr ng-repeat="i in styleRowDetails">
<td>{{i.val}}</td>
</tr>
</table>
</div>
JS
var myApp = angular.module('myApp', [])
myApp.controller('appCtrl', ['$scope', function($scope) {
$scope.styleRowDetails = [{
val: 'welcome'
}, {
val: 'hello'
},{
val: 'world'
}
];
}]);
Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/
You should try ng-bind-html
<td ng-bind-html="styleRowDetail.details"></td>
For a better understanding visit the documentation of ng-bind-html by angularjs
I have a table created using ng-repeat. In this table i have the used ng-repeat-start and ng-repeat-end in order to hide some row which will be visible only when the user wants to see it. Now my problem is that when i try to export this table to Excel the rows which are visible only appear in the excel also as there are rows which are linked each other appear as different rows(as in the table also they are different rows). Now what i want is that all the rows whether visible or not should appear in the excel. An is there a way that two rows which are linked to each other(as they contain data related to one single instance) can appear as single row in excel. Here is my code
function myCtrl($scope) {
$scope.exportData = function () {
var table = document.getElementById('exportable');
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
};
$scope.items = [{
"Name": "Name1",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "Name2",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="myCtrl">
<button ng-click="exportData()" >Export</button>
<br />
<table width="100%" id='exportable'>
<thead>
<tr >
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
<td>
<button ng-click="item.expanded=true">
more
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="item.expanded">
<td colspan=''>
</td>
<td colspan=''>
Hello
</td>
<td >
<button ng-click="item.expanded=false">
Hide
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Here is the Fiddle
Any Help would be appreciated Thanks.
use ng-show insted of ng-if fiddle
<tr ng-repeat-end ng-show="item.expanded">
I'm using a table in which I'm displaying some objects. I'm using jquery (bad, I know. But only thing I could get working) to add/remove class ng-hide from all elements with a specific ID. This results in a column being hidden and it works fine. But when any updates from the server comes and I use $scope.rows.push(object) and $scope.apply() the order of the columns gets messed up and the hidden column gets right back..
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table>
<thead style="font-weight: bold;">
<tr>
<td class="text-right" data-col-id="Value1">Value1</td>
<td class="text-right" data-col-id="Value2">Value2</td>
<td class="text-right" data-col-id="Value3">Value3</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td class="text-right" data-col-id="Value1">{{row.Value1}}</td>
<td class="text-right" data-col-id="Value2">{{row.Value2}}</td>
<td class="text-right" data-col-id="Value3">{{row.Value3}}</td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked" ng-change="columnToggled(column)"> {{column.id}}
</div>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
//trigger update
window.setInterval(function() {
$scope.simulateUpdates($scope.rows[0]);
}, 5000);
$scope.simulateUpdates = function (row) {
var newRow =
{
id: 1,
"Value1": Math.floor(Math.random() * 100) + 1,
"Value2": Math.floor(Math.random() * 100) + 1,
"Value3": Math.floor(Math.random() * 100) + 1
}
updateRow(newRow);
$scope.$apply();
}
function updateRow(row) {
for (var i = 0; i < $scope.rows.length; i++) {
if ($scope.rows[i].id === row.id) {
$scope.rows[i] = row;
}
}
}
});
Here is a demo of my problem in a minor scale: http://plnkr.co/edit/1tGci7qX9ZFIk69uNfIf?p=preview (uncheck one of the columns)
You overcomplicate things a bit: your model seems to be pretty simple actually. The key is using templates to express it properly. That's how it might look like, for example:
<table>
<thead>
<tr>
<th class="text-right" ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="row[column.id]"></td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
See? No need for that extra function: when you change the specific column checked attribute, it's automatically updated in all the corresponding views.
Demo.
I have fixed your code without using jQuery.
<table>
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" class="text-right" data-col-id="column.id" ng-show="column.checked">
{{column.id}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td class="text-right" data-col-id="Value1" ng-show="columnsTest[0].checked">{{row.Value1}}</td>
<td class="text-right" data-col-id="Value2" ng-show="columnsTest[1].checked">{{row.Value2}}</td>
<td class="text-right" data-col-id="Value3" ng-show="columnsTest[2].checked">{{row.Value3}}</td>
</tr>
</tbody>
</table>
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
You don't need to bind the ng-change function to the input checkbox since you already assigned it the ng-model using two-way data-binding.
The following is the working :Plunker
I have a list of several objects and at the beginning I want to load just some of them. I took a look at the statement ng-repeat, but I need to have a structure like this:
<table class="table table-hover table-hidden">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse" ng-init="isCollapsed=true">
...
</tr>
<tr ng-repeat-end class="more">
...
</tr>
</tbody>
</table>
I tried to apply the statement limitTo inside ng-repeat-start, in this way:
<tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse| limitTo: limit" ng-init="isCollapsed=true">
and on controller I wrote:
$scope.limit = 10;
$scope.incrementLimit = function () {
$scope.limit += 10;
};
The function incrementLimit is called by a click on hyperlink
<a href ng-click="incrementLimit()">more</a>
The list of objects is instantiated and filled (with all the elements) when the page loads.
With my approach at the beginnig are loaded and showed first 10 elements correctly, and when I click on "more" the variable $scope.limitis incremented, but on the page nothing happens. Anyone can explain me why?
limitTo is working fine inside ng-repeat-start
Take a look at this
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.limit = 1;
$scope.incrementLimit = function () {
$scope.limit += 1;
};
$scope.data = [{
title: 'Foo',
text: 'Lorem'
}, {
title: 'Bar',
text: 'Iste'
}, {
title: 'Jon',
text: 'Fat'
}, {
title: 'Los',
text: 'Ice'
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app='myApp' ng-controller="Controller">
<table border="2" class="table table-hover table-hidden">
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in data | filter:query | orderBy:predicate:reverse| limitTo: limit" ng-init="isCollapsed=true" ng-bind="object.title">...</tr>
<tr ng-repeat-end class="more">...</tr>
</tbody>
</table>
more
</div>
Please check the below code and fiddle it is working fine
<body ng-controller="myController">
<button ng-click="incrementLimit()" >increment</button> <br/>
<table class="table table-hover table-hidden">
<thead>
<tr clospan="3">
Head
</tr>
</thead>
<tbody>
<tr ng-repeat-start="friend in objects|limitTo: limit" ng-init="isCollapsed=true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
<tr ng-repeat-end class="more">
<td colspan="3">Footer</td>
</tr>
</tbody>
</table>
</table>
</body>
js code
app = angular.module("app", []);
app.controller("myController", function($scope) {
$scope.objects =
[{
name: 'John',
phone: '555-1212',
age: 10
}, {
name: 'Mary',
phone: '555-9876',
age: 19
}, {
name: 'Mike',
phone: '555-4321',
age: 21
}, {
name: 'Adam',
phone: '555-5678',
age: 35
}, {
name: 'Julie',
phone: '555-8765',
age: 29
}];
$scope.limit = 2;
$scope.incrementLimit = function () {
$scope.limit += 1;
};
});
Fiddle http://jsbin.com/hoguxexuli/1/edit
I solved my problem. Basically I put the hyperlink in a different div, so the controller and the $scope were also different. It was a stupid carelessness.