I'm trying to display data from a JSON object.
<table ng-controller="statsCtrl">
<tr ng-repeat="stat in stats">
<td>{{ stat.name }}</td>
<td>{{ stat.id }}</td>
</tr>
</table>
With the following code
'use strict';
angular.module('stats', [])
.controller('statsCtrl', ['$scope', function($scope){
$scope.stats = [
{
name: 'player',
id: 1,
skills: [{
taming: 244,
mining: 25,
woodcutting: 100
}],
}
];
}]);
But the view which is index.html isn't displaying anything.
{{ stat.name }} {{ stat.id }}
And I get the following error.
Not sure why. What am I doing wrong?
First time messing with AngularJS.
http://plnkr.co/edit/2EEDYMYq9tSYwXWSfm1c?p=preview
Seems to work fine, you might be missing ng-app or there might be another error which breaks your code along the way.
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function($scope){
$scope.stats = [
{
name: 'player',
id: 1,
skills: [{
taming: 244,
mining: 25,
woodcutting: 100
}],
}
];
}]);
With this HTML
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="stat in stats">
<td>Name: {{ stat.name }}</td>
<td>Id: {{ stat.id }}</td>
</tr>
</table>
</div>
</body>
Related
Below I have added my data
[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
}]
I want to make ng-repeat but I don't want to hard code any field (name, version, description, applicationenvironment)
How can I achieve this?
MY expectation :
IN TABLE it should come like this
Your array should be an object. So your structure simplifies quite a lot. Just extract key and values from your object and loop over it for each row. Then display key and values in separate columns per row:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.table = [{
"name": "testapp",
"version": "2.0",
"description": "testapp",
"applicationenvironment": "angularjs"
}]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key, value) in table[0]">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</body>
</html>
Although I don't recommend you to have this strucuture, you can do something like this:
angular.module('app', [])
.controller('appController', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
And your HTML would be something like this:
<div ng-app="app" ng-controller="appController as vm">
<ul>
<li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
</ul>
</div>
If you still need to have the data inside an array as you've wrote in the question, you would have to iterate over both the array and the object.
Now since your data source is an array, you need to do two nested ng-repeats
let app = angular.module("table",[]);
app.controller("tableCtrl", ["$scope", function($scope){
$scope.data = [{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
},
{
"name":"testapp 2",
"version":"2.1",
"description":"testapp 2",
"applicationenvironment":"angularjs"
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="table" ng-controller="tableCtrl">
<table ng-repeat="row in data">
<tr><td>Key</td><td>Value</td></tr>
<tr ng-repeat="(key,value) in row">
<td>{{key}}</td><td>{{value}}</td>
</tr>
</table>
</div>
Now if you do this, your data structure should yield the wanted result
You need to loop twice: Once through each the entire array of objects to access each object, and then inside each object to access individual key-value pairs.
I have posted the code below:
angular.module('app', [])
.controller('Controller1', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
<div ng-app="app" ng-controller="Controller1 as c1">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="c in c1.data">
<table>
<tr ng-repeat="(key, value) in c">
<td> {{ key }} </td>
<td> {{ value }} </td>
</tr>
</table>
</tr>
</table>
</div>
I am using angular.js for font-end and node.js for server side.
Now, I am having some list of values in array randomly.
Html code :
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table><tr ng-repeat="report in reports">
<td style="padding-left:10px;">{{report.salary_head_value11}}</td>
<td style="padding-left:10px;">{{report.salary_head_value12}}</td>
<td style="padding-left:10px;">{{report.salary_head_value13}}</td>
<td style="padding-left:10px;">{{report.salary_head_value14}}</td>
<td style="padding-left:10px;">{{report.salary_head_value15}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>
Controller code :
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.reports = [{
"salary_head_value11":100,
"salary_head_value12":300,
"salary_head_value13":200,
"salary_head_value14":800,
"salary_head_value15":500
},{
"salary_head_value11":200,
"salary_head_value12":400,
"salary_head_value13":900,
"salary_head_value14":800,
"salary_head_value15":600
}];
}]);
Output :
Expected code :
i want to print the same output without using {{report.salary_head_value11}} ......{{report.salary_head_value15}} in ng-repeat
If you dont need the string name salary_head_value, you can turn the array of objects into a 2d array:
$scope.reports = [
[ 100, 300, 200, 800, 500 ],
[ 200, 400, 900, 800, 600 ]
];
Then in HTML:
<table>
<tr ng-repeat="report in reports">
<td style="padding-left:10px;" ng-repeat="val in report">{{val}}</td>
</tr>
</table>
Note: untested, this is the concept, please modify it if there are syntax errors
I new to AngularJS and wish to access two arrays under ng-repeat. This is my code:
<tr ng-repreat="find in findOptions">
<td>find.first</td>
<td>find.second</td>
<td>{{ search[{{$index}}].third }}</td>
</tr>
search is another array that I want to access here
You can't have iterpolation inside a intepolation again, basically you could access scope variable directly inside it.
You could simply directly use $index to access array.
search[$index].third
Created JSFiddle Demonstration - https://jsfiddle.net/qtksp1kj/
Hope this will help!
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>LandMark</td>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element.name}}</td>
<td>{{element.address}}</td>
<td>{{myArray1[$index].landMark}}</td>
</tr>
</tbody>
</table>
</body>
var sampleApp = angular.module("SampleApp", []);
sampleApp.controller('fcController', function($scope) {
$scope.myArray = [{
'name': 'Name1',
'address': 'H-1 China Town'
}, {
'name': 'Name2',
'address': 'H-2 China Town'
}];
$scope.myArray1 = [{
'landMark': 'Near Dominos'
}, {
'landMark': 'Near Airport'
}];
});
I come from China,my English very poor,so I do a demo.how can I update array inside ng-repeat?
The HTML:
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table class="table">
<tr ng-repeat="user in users">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
{{user.spms|json}}
<div ng-repeat="u in user.spms">
<span ng-bind="u"></span>
<input type="text" ng-model="u" ng-change='updateArray($parent.$index, $index, u)'>
</div>
</td>
</tr>
</table>
</body>
The JS:
var app = angular.module('main', []).
controller('DemoCtrl', function($scope) {
$scope.users = [{
name: "Moroni",
age: 50,
spms: [
6135.7678,
504.4589,
2879.164,
669.7447
]
},
{
name: "seven",
age: 30,
spms: [
34135.7678,
5034.42589,
22879.1264,
63469.72447
]
}
];
$scope.updateArray = function(parent, index, u) {
$scope.users[parent].spms[index] = u * 1; // multiply by one to keep the value a Number
}
})
There are issues here are every update is changing the scope, so you can only change one time them click then change - so I would recommend add a update values button and implementing more or less the same logic to update the array values.
DEMO
I am new to angular and I am trying to learn, I have a table which I try to fill it with an array that I have:
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{ item.name }}</td>
<td>{{ item.familyName }}</td>
<td>{{ item.score }}</td>
</tr>
</table>
and my javascript code is as follow:
app.controller('repeatTest', function($scope, sharedService) {
$scope.list = [ {
name : 'hamed',
familyName : 'Minaee',
score : '100'
}, {
name : 'hamed',
familyName : 'Minaee',
score : '100'
} ];
});
which works perfectly fine but when I use service to hold he array that I have the table does not render, here is the javascript that I use which does not work:
app.service('sharedService', function() {
this.list = [ ];
});
app.controller('repeatTest', function($scope, sharedService) {
sharedService.list = [ {
name : 'ddd',
familyName : 'sss',
score : '100'
}, {
name : 'www',
familyName : 'aaa',
score : '100'
} ];
});
Can anyone help me? How can I make my code work with the second approach?
In angular, any values you wish to access in the view layer need to be attached to either the controller as "this" or to "$scope".
You set "sharedService.list" equal to a value, but that's not available to the view, so "list" will be undefined in your ng-repeat.
What you'd want to do in your controller is:
$scope.list = sharedService.list
and then define your list as:
this.list = [...some list here...]; in your service.
You have to add it to $scope. Often times the service is doing an AJAX call. See this Plunker for a working example: http://plnkr.co/edit/Yx6GYqnSLTzGD2TfB2p8?p=info
var app = angular.module("app", []);
app.service('sharedService', function() {
this.list = [{
name: 'ddd',
familyName: 'sss',
score: '100'
}, {
name: 'www',
familyName: 'aaa',
score: '100'
}];
});
app.controller('repeatTest', function($scope, sharedService) {
$scope.list = sharedService.list ;
});
And the HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js" data-require="angular.js#1.5.0" data-semver="1.5.0"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.familyName}}</td>
<td>{{item.score}}</td>
</tr>
</table>
</body>
</html>
app.service('sharedService', function(){
this.list = [ {
name : 'ddd',
familyName : 'sss',
score : '100'
}, {
name : 'www',
familyName : 'aaa',
score : '100'
} ];
});
app.controller('repeatTest', function($scope, sharedService){
$scope.list = sharedService.list;
});
The simple approach is define data in service and use that service in controller and bind data using $scope.
<table ng-controller="repeatTest">
<tr>
<td>name</td>
<td>family name</td>
<td>score</td>
</tr>
<tr ng-repeat="item in list">
<td>{{ item.name }}</td>
<td>{{ item.familyName }}</td>
<td>{{ item.score }}</td>
</tr>
</table>