I'm taking tutorial in CodeSchool about angular and I try to create my own experiment in html5 and angular new version in vs2012.
I try to test angular repeat but the problem is HTML5 can't render my angular.
When I try to run my page, the repeater only show the angular statement {{item.name}}:{{item.quantity}} not the result. Why? -"show code below"
Angular script :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
application.js :
<script type="text/javascript" src="Scripts/application.js"></script>
$(function () {
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script type="text/javascript" src="Scripts/application.js"></script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>
As you can see I add data- in my angular because I use html5. -"I hate warnings"
Your code has a number of typos and errors:
funtion instead of function
agular instead of angular
no jQuery included, but you call $(function(){...})
Here's a plunker with your code working.
Also, for future reference, if you remove .min from the angular source, it makes it easier to debug.
Please add this directive to your body tag:
data-ng-app="zaskarCorp"
Also, you have some misspellings in your javascript code.
Without using jQLite your code will look like this:
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [
{
"name": "dual sword",
"quantity": 2
},
{
"name": "gun",
"quantity": 1
},
{
"name": "laser sword",
"quantity": 1
}];
});
Full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
</script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>
Related
Given the following code:
http://jsfiddle.net/KN9xx/1102/
Suppose I received an ajax call with the following data I pass to a scope variable:
$scope.people_model = {
"people":[
{
"id":"1",
"name":"Jon"
},
{
"id":"2",
"name":"Adam"
}
]
};
How would I work with the select box to iterate over the 'people' via ng-options?
<select
ng-options="p.name for name in people_model"
ng-model="people_model">
</select>
Change your select as ,
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
You need to access the array people inside the object people_model
DEMO
var app = angular.module('myapp', []);
app.controller("FirstCtrl", ["$scope",
function($scope) {
$scope.currentSelected = "1";
$scope.people_model = {
"people": [{
"id": "1",
"name": "Jon"
}, {
"id": "2",
"name": "Adam"
}]
};
}
]);
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="FirstCtrl">
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
</body>
</html>
So I have a json file with nested elements. This is my json file:
[
{
"qid": "1",
"contester": "0",
"answer": "0",
"question": "What are you most likely to do after getting into an argument? ",
"images": [
{
"qid": "1",
"imageid": "AB100",
"imgname": "doghug_q1",
"imgpath": "Images\/Q1\/doghug_q1.jpg"
},
{
"qid": "1",
"imageid": "AB101",
"imgname": "eq_q1.jpg",
"imgpath": "Images\/Q1\/eat_q1.jpg"
},
{
"qid": "1",
"imageid": "AB102",
"imgname": "headache_q1",
"imgpath": "Images\/Q1\/headache_q1.jpg"
},
{
"qid": "1",
"imageid": "AB106",
"imgname": "scream_q1.jpg",
"imgpath": "Images\/Q1\/scream_q1.jpg"
},
{
"qid": "1",
"imageid": "AB107",
"imgname": "shopping_q1",
"imgpath": "Images\/Q1\/shopping_q1.jpg"
},
{
"qid": "1",
"imageid": "AB108",
"imgname": "walkAlone_q1",
"imgpath": "Images\/Q1\/walkAlone_q1.jpg"
}
]
},
{
"qid": "2",
"contester": "0",
"answer": "0",
"question": "Which game would you rather play?",
"images": [
{
"qid": "2",
"imageid": "AB105",
"imgname": "charades_q2.jpg",
"imgpath": "Images\/Q2\/charades_q2.jpg"
},
{
"qid": "2",
"imageid": "AB109",
"imgname": "playingCards_q2.jpg",
"imgpath": "Images\/Q2\/playingCards_q2.jpg"
},
{
"qid": "2",
"imageid": "AB110",
"imgname": "chess_q2",
"imgpath": "Images\/Q2\/chess_q2.jpg"
},
{
"qid": "2",
"imageid": "AB111",
"imgname": "twister_q2",
"imgpath": "Images\/Q2\/twister_q2.jpg"
}
]
}
]
And this is my controller that i used to access the json :
var app= angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
});
}
]);
And then my html code to display the questions and each questions list of images using the ng-repeat :
<body ng-app="myApp" >
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
As of now iam trying to display the questions id from the json file as a list however the output im getting is a:
{{question.qid}}
as the output in my html page.. Can someone please help me. I dont know what im doing wrong.
your code has some missing things.
Here is working example of your code
http://plnkr.co/edit/FvD26TYZ9v8TbgUBUzN2?p=preview
firstly,
var app = angular.module('myApp', []); //variable app is missing.
secondly, data you mention has missing closing square brace.
First define app
var app = angular.module('myApp', []);
Then initiate your $scope.questions on your controller like
$scope.questions = [];
Also you might need to parse your data with
$scope.questions = JSON.parse(data);
You haven's define the app so you should change the first line of your code to this and check your closing tags on your js code...:
var app = angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.questions = [];
$http.get('results.json').success(function(data) {
$scope.questions = data; // get data from json
angular.forEach($scope.questions, function(item){
console.log(item.images);
})
});
}
]);
Complete working code for your case :
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="question in questions"> {{question.qid}} </li>
</ul>
</div>
</body>
</html>
JS
var app = angular.module('plunker',[]);
app.controller('ListCtrl',function ($scope,$http) {
$http.get('data.json').success(function(data) {
$scope.questions = data; // get data from json
});
});
Working Plunker
It is working !! Try once !!
Trying to get the certain fields to display, ideally in a table (headings, rows & columns). And looking for a best way find fields in a Json feed. I tried using the controller to find the fields then pass that data to the view in the HTML.
Is there something wrong in the controller with respect to the Json? the fields are empty. Seems like nothing is passed from the controller to the view ? This is what I tried:
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
}
};
$scope.elements = $scope.result.data.transactionList.map(function (res) {
var e = {};
e.transTypeId = res.transTypeId;
e.userId = res.userId;
e.storeId = res.storeId;
return e;
});
});
</script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from the JSON feed</h1>
<ul>
<li ng-repeat="e in elements">
{{ e.transTypeId}}: {{ e.userId }}, {{ e.storeId }}
</li>
</ul>
</body>
</html>
You have a extra } in your $scope.result. It should be like:
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
};
// get rid of this};
Here is working plunkr
Perhaps a }; too many?
Automatic indentation usually makes those kinds of errors apparent.
Have you tried to use ng-model="...", it gives you the opportunity to overwrite an attribute or to show it. You can try it with
<input type="number" ng-model="someID" disabled="disabled">
*disabled if u need readOnly on that field.
and see how it works, maybe it can help you out.
regards
I may be wrong, but you are trying to read json data directly without parsing it?
MDN JSON.parse()
Also it would be nice if you upload your code on something like http://jsfiddle.net
This way people can test it out.
I have an html list generated using ng-repeat.
<div ng-repeat="product in store.products">
{{product.name}}
</div>
The data for the list is obtained from a json array in my app.js in this format:
var items = [
{
"name": "Nexus 5",
"size": "4.95 inches",
"camera": "8 megapixels"
},
{
"name": "Nexus 6",
"size": "6.0 inches",
"camera": "13 megapixels"
}
];
I want to click on the list item and go to another page showing the respective details from the same json array. How do I do that? Have been trying to access index from the list and use it to load next page, but am unsuccessful so far. I am new to angular as well as javascript. Any intermediate steps will be very helpful.
Also, notice I am handling click on the list using an anchor tag. Is this the ideal way to do it?
Please see for demo here http://plnkr.co/edit/qVEhc0KgKjklWCmqKJ4L?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script data-require="angular-route#1.2.16" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
JS:
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: "main.html",
controller: "mainController"
}).when('/detail/:productName', {
templateUrl: "details.html",
controller: "detailsController"
}).otherwise({
redirectTo: "/main"
});
})
.controller("mainController", function($scope, dataService) {
$scope.store = {}; //.products
$scope.store.products = dataService.getProducts();
})
.controller("detailsController", function($scope, $routeParams, dataService) {
$scope.product = dataService.getProductAt($routeParams.productName);
});
angular.module("plunker").service("dataService", function(filterFilter) {
var items = [{
"name": "Nexus 5",
"size": "4.95 inches",
"camera": "8 megapixels"
}, {
"name": "Nexus 6",
"size": "6.0 inches",
"camera": "13 megapixels"
}];
this.getProducts = function() {
return items;
};
this.getProductAt = function(_name) {
this.getProducts();
return filterFilter(items, {
name: _name
})[0];
};
});
(you need details.html and main.htm template as well)
I have a select box that will not select the option that is bound to ng-model or ng-select, instead it selects the hard coded value initially but when I select another it just overriders my selection with the last item in the list. I have stripped it down to it bare minimum and still cannot see
this is my html page:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div ng-app="myapp">
<div ng-controller="myController">
<select ng-model="freezeCalendar_model" ng-options="freezeCalender.calendarID as freezeCalender.name for freezeCalender in freezeCalendarList"></select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
and this is my script.js:
var app = angular.module("myapp", ["controllers"]);
var controllers = angular.module("controllers", []);
controllers.controller('myController', function ($scope) {
$scope.freezeCalendar_model = 162;
$scope.freezeCalendarList = [{
"id": 104,
"name": "ABC"
}, {
"id": 202,
"name": "123"
}, {
"id": 121,
"name": "xyz"
}, {
"id": 224,
"name": "hello"
}, {
"id": 162,
"name": "bam"
}, {
"id": 164,
"name": "boom"
}];
});
I also Have a plnkr here
This is frustrating me a lot because I have a lot of selects working fine and I cannot understand what is wrong with this particular one.
Help would be greatly appreciated
You're not referencing the id correctly, it appears. Works fine for me after making that change.
Change:
freezeCalender.calendarID as freezeCalender.name
To:
freezeCalender.id as freezeCalender.name