Understanding ng-repeat for array of Objects - javascript

I have the following array of objects, which is a server response. I am trying to use ng-repeat to iterate over this array and read each value.
While trying to use in html, array[0].value is working while using ng-repeat, nothing is working.
After a lot of debugging, I am unable to understand how ng-repeat is working for arrays.
Here is my example:
messages array:
[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
]
The following is used in html:
<div class="my-message" layout="row" layout-align="center center">
{{messages}} <!-- printing the above array -->
<div ng-repat="message in messages">
{{ message.Id}}<!-- printing nothing -->
</div>
{{ messages[0].Id }} <!-- printing 14 !-->
</div>
The array is in scope and it is also seen in this html as the {{ message }} array is printing properly.
Can someone help me understand the working of ng-repeat and where am I missing

In your controller you must have :
$scope.messages = [{"Id":1,...},...]
There is a typo in your view code (ng-repat -> ng-repeat):
<div ng-repat="message in messages">
{{ message.Id}}
</div>
must be :
<div ng-repeat="message in messages">
{{ message.Id}}
</div>
It should be fine like this.
Have fun

hope this will clears you
<!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.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="my-message" layout="row" layout-align="center center">
{{messages}} <!-- printing the above array -->
<div ng-repeat="message in messages">
{{ message.Id}}
{{ message.Text }}
{{ message.count }}
</div>
</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.messages =[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
];
});
</script>
</html>

The issue is with typo in using "ng-repeat", after correcting it my code worked normally as expected.

Related

array data is not visible to li tag when pushed in angular

I'm new to angularjs. I'm trying to create a to do list app. The problem i'm facing is when i push the data to the object, the data is being displayed in the console but not the web page. I"m using materialize css framework as well. Here is my html code.
<head>
<title>Shamanager</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container" ng-controller="tasks">
<h3 class="center-align"><i>Hola! Sham</i></h3>
<form class="row" ng-submit="enter()" novalidate>
<div class="col s12">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" ng-repeat="thing in lists">
<i class="material-icons">filter_drama</i>
</div>
</li>
<li>
<div class="collapsible-header">
<input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
</div>
</li>
</ul>
</div>
</form>
</div ng-submit="">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="bower_components/materialize/bin/materialize.js"></script>
</body>
</html>
And here is my javascript code.
angular.module('manager', [])
.controller('tasks', function($scope) {
$scope.lists = [
]
$scope.name = '';
$scope.enter = function() {
console.log('hello world');
$scope.lists.push($scope.name);
console.log($scope.name);
$scope.name = '';
}
})
Okay it seems to me that you have a lot of unclear knowledge about HTML in the first place and of Angular in the second place.
Some errors I spotted:
You have a form with
Your input field on the form has multiple type attributes but it would only need type="text"
You are using ng-submit on strange places ( but it would be enough on the form)
There is no way for displaying the data in the ng-repeat over lists. You need to display the items with ยด{{ thing }}`, for example:
<ul>
<li ng-repeat="listItem in lists">{{ listItem }}</li>
</ul>
Overall I would really recommend you to study some examples like this ones to become more familiar with the way angular should work:
https://codepen.io/Russbrown/pen/IgBuh
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_todo_app
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
Here is also a quite good tutorial on what you want to achieve:
https://www.youtube.com/watch?v=1STpbC44bRA
Hope it helps.

Error coming up while using ng-repeat for a array in javascript

I am stuck at this issue while running my code
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
I keep getting this error.
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: filters in activeFilterCtrl.selectedfilters, Duplicate key: string:a, Duplicate value: a
Please provide the solution Following is the value of selected filter
selected filter value is [{"params":"min","value":5}, {"params":"max","value":30}]
try with this
ng-repeat="filters in activeFilterCtrl.selectedfilters track by $index"
Try this Demo Link
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl as activeFilterCtrl">
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.selectedfilters = [{"params":"min","value":5}, {"params":"max","value":30}]
});

angular trouble with http service

I have the following controller.js
var eclassApp = angular.module('eclassApp', []);
eclassApp.controller('StudentsListCtrl', ['$scope','$http',
function($scope, $http){
$http.get('/static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
}]);
My html is the following
<!DOCTYPE html>
<html lang="en" ng-app="eclassApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="../static/js/controller.js" type="application/javascript"></script>
</head>
<body ng-controller="StudentsListCtrl">
<h3>Class B3</h3>
<div class="row">
<div class="col-xs-3">
Search: <input type="text" ng-model="query">
</div>
<div class="col-xs-5">
<select ng-model="orderProp">
<option value="last_name">Alphabetical</option>
<option value="age">Youngest</option>
<option value="-age">Oldes</option>
</select>
</div>
</div>
<div class="row">
<ul>
<li ng-repeat="student in students | filter:query | orderBy:orderProp">
<p>{{student.name}}</p>
<p>{{student.last_name}}</p>
</li>
</ul>
</div>
</body>
</html>
my json file gets accessed normally (from chrome's developer's console) but still I get the following errors.
SyntaxError: Unexpected token ]
at Object.parse (native)
at pc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:14:208)
at Zb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:76:379)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:237
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:7:302)
at Zc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:77:219)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:78:349)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:112:20
at l.$get.l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:125:305)
at l.$get.l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:122:398)
Am I missing a tokken that I can't see?
EDIT: I'm sorry..As a python developer I'm used in putting commas after last element in an array, something json arrays don't work well :). I had forgotten a comma on my json file. Removed it and works great
Try this -
eclassApp.controller('StudentsListCtrl', function($scope, $http){
$http.get('static/js/students.json').success(function(data){
$scope.students = data;
});
$scope.orderProp = 'last_name';
});

Angular module only works with inline javascript

I am learning Angular and adding a controller to my module only works when all the code is inline on the page. If I replace it with <script src="myModuleFile.js"></script> it fails with
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.11/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20personController
var app = angular.module('app', [])
.config([function(injectables){
console.log('configuring app');
}]).run([function(injectables){
console.log('running app');
}]).controller("personController", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="web/stylesheets/app.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<!-- wont work if I include it this way -->
<script src="web/js/app.min.js"></script>
<!-- but works if I put it in here -->
<script></script>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"><hr />
<h1>Hello {{ yourName }}!</h1>
<div ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
<div ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</body>
</html>
As Claies mentioned in the comments, the error message looks like it is trying to find a provider for a dependency "a", which is probably a result of minification.
If you do like:
angular.module(..).controller("SomeCtrl", function($scope){});
It might minify $scope to just a. So instead you should use:
angular.module(..).controller("SomeCtrl", ["$scope", function($scope){}]);
Because the string will not be minified, Angular will know which dependency is which. Another way would be to use $injector of course, as Claies also mentioned.

AngularJs ng-repeat is not working properly

I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem

Categories