Finally trying to learn AngularJS and I can't quite figure out how to make components work recursively. I have a simple example that's not rendering as expected.
HTML
<body ng-app="myApp" ng-controller="myCtrl as vm">
<nested-list list="vm.list"></nested-list>
</body>
JavaScript
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.list = [
{ "name": "Item 1" },
{ "name": "Item 2",
"subItems": [
{ "name": " Item 2.1" }
]
},
{ "name": "Item 3",
"subItems": [
{ "name": " Item 3.1" },
{ "name": "Item 3.2",
"subItems": [
{ "name": "Item 3.2.1" },
{ "name": "Item 3.2.2" }
]
}
]
}];
}])
.component('nestedList', {
bindings: {
list: '<'
},
template: `
<div ng-repeat="item in $ctrl.list" >
<div> {{item.name}} </div>
<nested-list list="item.subItems"></nested-list>
</div>
`
});
Undoubtedly because I'm missing something obvious, the list from the app's main controller myCtrl isn't getting bound to the root component. If anyone can provide insight, I'd be grateful.
Stephen
As you are using controllerAs, you should be binding values to controller this(context) instead of binding values to $scope.
.controller('myCtrl', [function() {
var vm = this;
vm.list = [ ..];
}]);
Plunker Here
Related
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 !!
Currently working on angularjs I am trying to get the data from JSON file and I am showing the result in Ul format. when I searched in SO I found this link I am trying to do the same but still I am not getting
This is what I am trying here in controller
'use strict';
var app = angular.module('myApp', []);
app.controller('MyController', function($scope, $http){
$http.get('sample.json').then(function (response){
$scope.items = response.data.countries;
});
});
HTML Code
<body ng-app="myApp">
<div ng-controller="MyController">
<ul>
<li ng-repeat="(key, value) in items" {{key}}>
</li>
</ul>
</div>
</body>
Here is my plunker kindly help me what i am doing wrong here
One other problem: your JSON is incorrect:
{
"countries": {
"State": [
"TamilNadu"
],
"State": [ <-- Error: duplicate key!
"Karnataka"
]
}
}
Here is an alternative:
{
"countries": [
{ "USA": [
{"State": "California"},
{"State": "Nevada"} ]},
{ "India": [
{"State": "TamilNadu"},
{"State": "Karnataka"} ]}
] }
There are three issues,
(i)You do not need to declare the module twice , once in script.js and other one
in controller.js.
(ii) You were refering to angular 2.0 version ,and coded using angular 1.4 version.
(iii)If you want to show all states from json, it should not have a duplicate key, which you could see from the plunker itself
{ "countries": {
"State": [
"TamilNadu"
],
"State": [ <-- Error: duplicate key!
"Karnataka"
] } }
Here is the working Application
I have been following the Angular tutorials, and I am trying to get my JSON data to appear, yet I know I am doing something wrong, but can't figure out the proper method.
I know that somewhere in my app.js my scope is messed up.
How can I display the Family Name of each product?
Here is the layout I have:
app.js
var eloApp = angular.module('eloMicrosite', []);
eloApp.controller('homeListController', ['$scope', '$http',
function($scope, $http) {
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
$scope.products = data;
});
}]);
eloApp.controller('HomeController', function(){
this.products = $scope.products;
});
HTML
<div ng-controller="HomeController as home">
{{home.products[o]["Family Name"]}}
</div>
JSON Layout
{
"products": [
{
"Family Name": "3201L",
"Type": "IDS",
"Size (inches)": 32,
"Aspect Ratio": "16:9",
"Part Number": "E415988",
"Product Description": "ET3201L-8UWA-0-MT-GY-G",
"Marketing Description": "3201L 32-inch wide LCD Monitor",
"Advance Unit Replacement": "",
"Elo Elite": "",
"Package Quantity": 1,
"Minimum Order Quantity": 1,
"List Price": 1800
},
.
.
.
],
"families": [
{
category: "Category1"
},
{
category: "Category2"
}
],
"accessories": [
{
category: "Category1"
},
{
category: "Category2"
}
]
}
You should add homeListController on your page instead of HomeController, Also need to use this instead of using $scope as you wanted to follow controllerAs syntax, 2nd controller is useless in this scenario, you could remove that from app.js.
Markup
<div ng-controller="homeListController as home">
{{home.products[0]["Family Name"]}}
</div>
Controller
eloApp.controller('homeListController', ['$http',
function($http) {
var home = this;
$http.get('/Elo/eloMS.min.json')
.success(function(data) {
home.products = data.products; //products should mapped here
});
}]);
Demo Plunkr
I just started with ionic and I know this is probably super easy. I've been reading about how to use ionic and angular, but haven't been able to figure this easy little task out.
I just want to simply pull json from an external file. I'm still reading the docs, but can't manage to figure out how to do this just yet.
http://codepen.io/anon/pen/wKwxpX
var myApp = angular.module('myApp', ['ionic']);
myApp.controller('MainCtrl', function() {
//instead of hard coded json, I need to get json from an external source here
this.items = [
{title: "Item 1"},
{title: "Item 2"},
{title: "Item 3"},
{title: "Item 4"},
{title: "Item 5"},
]
for (var i = 0; i < 1000; i++)
this.items.push(i);
});
You could use $http call to make an ajax for external ajax and inside success call bind that result to the $scope variable.
Also you need to wrap title in " double quotes to make it valid json like "title"
Markup
<body ng-controller="MainCtrl as main">
<ion-header-bar class="bar-positive">
<h1 class="title">1000 Items</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item collection-repeat="item in main.items">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
</body>
Controller
var myApp = angular.module('myApp', ['ionic']);
myApp.controller('MainCtrl', function($http) {
var main = this
$http.get('data.json').success(function(data){
main.items = data;
})
});
data.JSON
[{
"title": "Item 1"
}, {
"title": "Item 2"
}, {
"title": "Item 3"
}, {
"title": "Item 4"
}, {
"title": "Item 5"
}]
Demo Plunkr
I would like to know what is wrong with my code when I am creating a simple AngularJS search controller using $.get to retrieve the data from an external json file. It looks like I have all the correct data. JSfiddle is here: http://jsfiddle.net/jmccommas/MLzF7/
controller:
var personApp = angular.module('personApp', []);
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('data/persons.json').success(function(data) {
$scope.persons = data;
});
});
html:
<div ng-controller="PersonListCtrl">
<div class="bar">
Search: <input ng-model="query">
</div>
<ul class="">
<li ng-repeat="person in persons | filter:query">
{{persons.name}}
</li>
</ul>
</div>
json:
[
{
"name": "John Doe"
},
{
"name": "Mike Doe"
},
{
"name": "Sam Doe"
},
{
"name": "Jerry Doe"
},
{
"name": "Paul Doe"
},
{
"name": "Peter Doe"
},
{
"name": "Fred Doe"
},
{
"name": "Ralph Doe"
},
{
"name": "Mike Doe"
},
{
"name": "John Doe"
}
]
There are three small things which is going wrong (at least in the JS Fiddle)
1. You have set the JS to load on DOM Ready. Change that to no-wrap in head.
2. In the ng-repeat, you have persons.name. It should be person.name. You are getting person when you are lopping through persons.
3. The JSON in the fiddle is not present. So in my own fiddle, I have for now hard coded the object
http://jsfiddle.net/amitavroy/rCrGP/
Change your li to the following
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>