ng-repeat not showing me value from the array - javascript

I am using ng-repeat directive but it does not showing me value. Here is my code
JS File:
var artist = angular.module('artistApp',[]);
artist.controller('artistController',['$scope',function($scope){
$scope.author =
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}
}]);
HTML file:
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="artistController">
<ul>
<li ng-repeat="item in author">
{{item.name}}
</li>
</ul>
</div>
</body>
Where is the mistake that i m doing wrong here.

You're missing the opening bracket to the author array
$scope.author =
{
Needs to be:
$scope.author =
[{

in JS
$scope.author =
[{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}];
HTML
<li ng-repeat="item in author track by $index">
{{item.name}}
</li>

Replace the last '}' with ']'
Working Plunker
Corrected JSON:
[{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}
]

Related

Feed Vuejs 2 Marker Template from Javascript

How to feed template to HTML from Javascript? Sounds confusing? I'll try my best to explain after put all the codes in here...
I have index.html here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inject Template</title>
</head>
<body>
<div id="app">
<div v-html="injectHTML" v-if="injecting"></div>
<div id="chart">
<ol>
<li id="card-wrapper">
<div id="card">
<employee-card :info="emp.chart[1]"></employee-card>
</div>
</li>
</ol>
</div>
</div>
<!-- Vue.js Component: Employee Card Template -->
<script type="text/x-template" id="employee-card-template">
<div class="employee-wrapper" v-if="info" :id="info.id">
<a class="node" :href="'#'+info.id">
<div class="empinfo">
<p class="name">{{info.name}}</p>
<p class="office">{{info.office}}</p>
<p class="title">{{info.title}}</p>
</div>
</a>
</div>
</script>
<script src="lib/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js
const app = new Vue({
el: "#app",
data: {
emp: [], //collect employee information from JSON
injectHTML: '',
injecting: false,
key: 0
},
watch: {
key: function () {
app.$forceUpdate();
app.injecting = true;
}
},
created: function () {
this.loadEmpJson();
setTimeout(() => { this.inject(); }, 500);
},
methods: {
loadEmpJson: function () {
const xhr_oho = new XMLHttpRequest();
xhr_oho.open('GET', 'data/employee.json', true);
xhr_oho.responseType = 'text';
xhr_oho.send();
xhr_oho.onreadystatechange = function () {
console.log(`xhr_oho.readyState: ${xhr_oho.readyState}`)
console.log(`xhr_oho.status: ${xhr_oho.status}`)
console.log(`xhr_oho.statusText: ${xhr_oho.statusText}`)
}
xhr_oho.onload = function () {
app.emp = JSON.parse(xhr_oho.responseText);
}
},
inject: function () {
this.injectHTML =
`<div id="chart">
<ol>
<li id="card-wrapper">
<div id="card">
<employee-card :info="emp.chart[0]"></employee-card>
</div>
</li>
</ol>
</div>`
setTimeout(() => { this.key++; }, 500);
}
}
});
Vue.component('employee-card', {
template: '#employee-card-template',
props: {
info: { type: Object, default: () => ({}) }
}
})
lastly, the excerpt employee.json
{
"description": "ABC Company Organizational Chart",
"chart": [
{
"name": "Jimmy Moore",
"office": "Front Office",
"title": "CEO/Owner"
},
{
"name": "Betty Kahoolawe",
"office": "Front Office",
"title": "President"
},
{
"name": "David Merrill",
"office": "Front Office",
"title": "Vice President",
"assistants": [
{
"name": "Amanda Cochran",
"office": "Front Office",
"title": "Executive Assistant"
},
{
"name": "Savannah Clewiston",
"office": "Front Office",
"title": "Budget Officer"
}
]
}
]
}
I would like to be able to feed multi marker template (employee-card) dynamically from app.js. Reason for this, I will have a recursive collecting data from JSON file and elaborate the employee-wrapper template depending on data from JSON. Grouping by the employees such as office, division, component, and branch. Also grouping by the employees under each supervisor where it can be expand and collapse those employees under the supervisor.
But the point I need to be able to feed the from app.js
You can see the output:
1.
1. Betty Kahoolawe
Front Office
President
which should be:
1. Jimmy Moore
Front Office
CEO/Owner
2. Betty Kahoolawe
Front Office
President
Your help is greatly appreciated! Thank you.

Angular - Binding the following data via ng-options for a select field

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>

How to pass ng-repeat value to controller

I am using an ng-repeat directive with filter like so:
<div ng-repeat="person in data">
</div
i.e Showing {{data.length}} Persons. (I am expect to pass the length value to controller)
But i need to pass the filtered length value to controller because i do same logic based on the filtered length value.
1.Method 1
ng-repeat="item in filtered = (data | filter:filterExpr)"
Would create the filtered list.
filtered.length will show the filtered length.
2.Method 2
Use $watch for detecting the filtered length.
$scope.length = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.length = $filter("filter")($scope.data, query).length;
});
Example
var app = angular.module('angularjs-starter', [])
app.controller('MainCtrl', function($scope, $filter) {
$scope.data = [{
"name": "Martin",
"age": 21
}, {
"name": "Peter",
"age": 26
}, {
"name": "Arun",
"age": 25
}, {
"name": "Maxwell",
"age": 22
}];
$scope.counted = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.filteredData = $filter("filter")($scope.data, query);
});
});
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input ng-model="search" type="text">
<br>Showing {{data.length}} Persons;
<br>Filtered {{filteredData.length}}
<ul>
<li ng-repeat="person in filteredData">
{{person.name}}
</li>
</ul>
</body>
<script>
</script>
</html>

Use Angular with HTML5

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>

AngularJS data-ng-controller doesn't work

I could not figure out why the following code doesn't work at all. Frankly, It looks alright to me. Is there any idea?
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">
</script>
<script>
function simpleController($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}
</script>
</body>
</html>
It is to do with the version of angular you are using.
Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did.
Then this ability was removed from angular.
There are still alot of tutorials around that reference this older style however.
See this demo - http://jsbin.com/fowamutoli/1/edit
I have replaced with angular legacy and your code runs.
So in the future you need to declare an angular module and register your controller against it.
i.e.
<html data-ng-app="app">
<script>
var app = angular.module('app', []).
controller('simpleController', function ($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
https://docs.angularjs.org/guide/controller
try replacing your data-ng-app to ng-app="myApp", see if it works. :) with the following snippet.
var myApp = angular.module('myApp',[]);
myApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}]);
Try this instead:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div ng-controller="simpleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var myApp = angular.module( "MyApp", [] );
myApp.controller("simpleController", function( $scope )
{
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
</body>
</html>
http://jsfiddle.net/rv7r7nv7/

Categories

Resources