Hello I am learning angular 1 and I have problem at the very beggining.
I'm trying to display data with table in ng-repeat using controller. Angular in app stops working at all even {{ 2 + 2 }} on bottom of page doesn't work. I can't find the reason why.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SZYBKI START Z BRACKETS</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body ng-app="aplikacja">
<div class="container" ng-controller="kontrolerTabeliSkoczkow">
<h1 class="text-center">Klasyfikacja skoczków narciarskich</h1>
<br />
<div class="input-group">
<span class="input-group-addon">Szukaj: </span>
<input type="text" class="form-control" placeholder="np. Adam Małysz" />
</div>
<br />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="naglowek in [
'Imię', 'Rok urodzenia', 'Narodowość'
]">{{ naglowek }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="skoczkowie in skoczkow">
<td>{{skoczek.Name}}</td>
<td>{{skoczek.Nation}}</td>
<td>{{skoczek.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ 2+2 }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}];
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
You forgot to close the controller.
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}]);
</script>
(The ')' at the very end)
Also, I would declare Jquery BEFORE angular
It's typo mistake, change
app.contoller(...)
to
app.controller(...)
and close properly:
app.controller("kontrolerTabeliSkoczkow" , ['$scope', function( $scope ) { ... }]);
see link jsfiddle
A parenthesis is missing just between the ]} and ; at the end of your controller
Furthermore, I do not recommand using this notation, just don't declare dependencies in your controller, I recommand doing it this way :
app.controller("kontrolerTabeliSkoczkow", function($scope){
/*anything you want to put in it*/
});
You don't get confused by parenthesis, brackets and stuff, just declare your dependencies in your module, not in your controller
Related
I am kind of new to AngularJS and is now facing with an issue. When I browse the solution and select an item from any category it updates the all the sections textboxes with the result instead of the on intended section.
If I have only one section then everything is perfectly fine but the moment I have more than one section, then everything goes for a toss. I know this is because of the $scope variable currentItem. I am not sure how I can solve this issue.
Any light thrown to solve the issue is highly appreciated. Thank you in advance.
HTML Page [default.htm]
<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<div ng-view>
</div>
<script src="myapp.js" type="text/javascript"></script>
</body>
</html>
JavaScript [myapp.js]
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl : 'partials/Home.htm',
controller : 'HomeController'
})
.otherwise({redirectTo: '/home'});
});
app.controller('HomeController', function($scope,$sce, $http, $location, $rootScope) {
$scope.datas = [
{
"category":"First Category",
"items":[
{
"itemCode":"001",
"itemDescription":"Item 01"
},
{
"itemCode":"002",
"itemDescription":"Item 02"
}
]
},
{
"category":"Second Category",
"items":[
{
"itemCode":"004",
"itemDescription":"Item 04"
},
{
"itemCode":"005",
"itemDescription":"Item 05"
}
]
}
];
$scope.selectItem = function(parentindex, index){
$scope.currentItem = $scope.datas[parentindex].items[index];
}
});
Partial Page [partials/Home.htm]
<div ng-repeat='data in datas'>
<table>
<tr>
<td>
{{data.category}} Items
</td>
</tr>
<tr ng-repeat='item in data.items' ng-click='selectItem($parent.$index, $index)'>
<td>
{{item.itemDescription}}
</td>
</tr>
</table>
<table>
<tr>
<td>
Code:
</td>
<td>
<input ng-model='currentItem.itemCode' type="text" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input ng-model='currentItem.itemDescription' type="text" />
</td>
</tr>
</table>
</div>
Empty data is adding in Table.
I am not able to retrieve data from Json file using Angular Js. I am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr in table.
var app =angular.module('sampleapp', [])
app.controller("tablejsonCtrl", function ($scope, $http) {
$scope.jsonclick = function () {
var url = "http://127.0.0.1:8000/static/waste/test.json";
$http.get(url).then( function(data) {
$scope.students = data;
});
}
});
<!doctype html>
<html lang="en" ng-app="sampleapp">
<head>
{% load staticfiles %} <!-- <meta charset="utf-8"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'waste/angular.min.js'%}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
<div class="col-sm-12" ng-controller="tablejsonCtrl">
<button class="clickbutton" value="10" ng-click="jsonclick();">Show-json</button>
<table rule="all" class="table table-bordered table-hover ">
<tr>
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th>Calories</th>
<th>isbest</th>
</tr>
<tr ng-repeat="stuednt in students">
<td>{{stuednt.name}}</td>
<td>{{stuednt.price}}</td>
<td>{{stuednt.description}}</td>
<td>{{stuednt.calories}}</td>
<td>{{stuednt.isbest}}</td>
</tr>
</table>
</div>
</body>
</html>
$http.get(url).then(function(response, data){
$scope.students = response.data;
});
You need to pass a response alongside the data that you are fetching.
controller
$http.get(URL).then(function(response) {
$scope.students= response.data;
});
html
<tr ng-repeat="value in students.breakfast_menu.food">
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>{{value.description}}</td>
<td>{{value.calories}}</td>
<td>{{value.isbest}}</td>
</tr>
json price and calories values should be in double quotes
{
"breakfast_menu":
{
"food": [
{
"name": "Belgian Waffles",
"price": "$5 .95",
"description": "Two of our famous Belgian Waffles with plenty of real maple syrup",
"calories": "650",
"isbest": "false"
},
{
"name": "Strawberry Belgian Waffles",
"price": "$7 .95",
"description": "Light Belgian waffles covered with strawberries and whipped cream",
"calories": "900",
"isbest": "true"
}]
}
}
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What i need is when i change the value from child window textbox the reflect should appear on parent window records in a table. And here is my parent.html.
-----index.html--------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<form method=post action='' name=f1>
<table border="1" >
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th> Edit here</th>
</tr>
<tr ng-repeat="person in people">
<td><span id="d" name='p_name'>{{person.id}}</span></td>
<td><span id="c" name='q_name'>{{person.name}}</span></td>
<td><span id="e" name='r_name'>{{person.age}}</span></td>
<td>Edit</td>
</tr>
</table>
</form>
</div>
</div>
<script>
var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
$scope.people = ([
{
id: 1,
name: "Peter",
age: 21},
{
id: 2,
name: "David",
age: 20},
{
id: 3,
name: "Anil",
age: 22}
])
$scope.foo = function() {
$window.open('index1.html');
};
});
</script>
And here is my child window:
------index1.html-------
<!DOCTYPE html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
opener.document.f1.q_name.value = document.frm.d_name.value;
opener.document.f1.r_name.value = document.frm.e_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body ng-app="mainApp" >
<div ng-controller='childController'>
<form name="frm" method=post action=''>
<table border="0">
<tr><td>Enter id:</td><td><input id="d" type="text" name="c_name" ></td></tr>
<tr><td>Enter name:</td><td><input id="c" type="text" name="d_name" ></td></tr>
<tr><td>Enter age:</td><td><input id="e" type="text" name="e_name" ></td></tr>
<tr><td><button onclick="post_value();">Save</button></td></tr>
</table>
</form>
</div>
</body>
</html>
And here is my plunker: http://plnkr.co/edit/qF2zvp0VYY9wMvWzt3XK?p=preview
You shouldn't open details in other window. Then you can't persist data in your app because there is no way to communicate between two windows.
I don't think so you should make this thing this complicated as you can make you app as SPA (Single Page Application), For that you need to use ng-route which will dynamically load the pages on basis of url changes.
Using below html
<div ng-view></div>
Then you need write configuration for you app, when to load which template with which controller
Config
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleCtrl'
})
.when('/people/:id', {
templateUrl: 'details.html',
controller: 'detailsCtrl'
})
.otherwise({
redirectTo: '/people'
});
}
]);
Working Plunkr here