Angular JS ng-repeat not working as expected - javascript

I have a controller like this:
controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {
function init (){
$scope.ui={};
$scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];
$rootScope.oldScope=$scope;
}
$scope.setBreadCrumbs=function() {
$scope.ui.mdBreadCrumbs=crumble.trail;
}
init();
}]);
and in HTML,
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
{{ui.mdBreadCrumbs}} is showing some like [{"path":"path1","label":"label1"}].
But in ng-repeat, it is not iterating.
Using $scope.setBreadCrumbs I put some more values, but still ngRepeat not working.
Anyone have any idea why it is not working?

Change
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
to
<ol id="breadCrumbList" ng-controller="BreadCrumbs">
DEMO
var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
$scope.ui = {};
$scope.ui.mdBreadCrumbs = [{
"path": "path1",
"label": "label1"
}];
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="BreadCrumbs">
<ol id="breadCrumbList">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
<script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
<script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>

You have to change something in your HTML and your HTML should be like this:
<div ng-app>
<div ng-controller="BreadCrumbs">
<div ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</div>
</div>
</div>

Related

Angular does not show output

Have tried every solution on stackoverflow but it does not solve my problem,
my output is not showing.
The output does appear in logs and everywhere else but due to some reason angular is unable to render it.
In my real scenario i will be receiving data from a server and i have mimicked the object structure i will be getting in the 'controller.js' file
Html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller.js
var app=angular.module('application', []);
app.controller("controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
Application.js
var app = angular.module("application", []);
app.run(function(){
console.log("App running!");
});
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="_controller">
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</div>
<script>
var app=angular.module('application', []);
app.controller("_controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
app.run(function(){
console.log("App running!");
});
</script>
</body>
</html>
Syntax error in console.log, missing leading quote on App running.
//script.js
var app = angular.module("application", []);
app.run(function() {
console.log("App running!");
});
app.controller("controller", function($scope) {
var d = [{
'Task': 'Say hi!',
'Status': 'failed'
}];
$scope.t = d[0].Task;
$scope.s = d[0].Status;
console.log("Task", $scope.t);
console.log("Status", $scope.s);
});
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You have mistake in this line
console.log(App running!");
You forgot one "
that should be
console.log("App running!");
Solving that your code works fine.

Data is not get from json file using angularjs

Here is my HTML file and JS file
I'm not getting any data's from the JSON file to the html file
Below I have HTML files and JS files:
<!Doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
alert("c");
function imagecontroller($http,$scope){
alert("cd");
$http.get('ytdata.json').success(function(ytdata) {
alert("cdscdsc");
$scope.data = ytdata;
});
}
</script>
<style type="text/css">
li{list-style:none;float:left;padding:20px;}
a{text-decoration:none;}
</style>
</head>
<body>
<div ng-controller="imagecontroller">
<ul>
<li ng-repeat="datum in data">
<a>
<img ng-src="{{datum.thumbUrl}}"/>
<br />Id : {{datum.id}}
<br />Purchase : {{datum.Purchase}}
</a>
</li>
</ul>
</div>
</body>
</html>
This is my json file:
[
{
"id":"mobile.jpg",
"thumbUrl":"image url",
"Purchase":20000
},
{
"id":"pendrive.jpg",
"thumbUrl":"image url",
"Purchase":400
},
{
"id":"laptop.jpg",
"thumbUrl":"image url",
"Purchase":3833
}
]
Please get me the output for this program
Thanks in advance
Here is a working plunker of what you are trying to do:
Controller
app.controller('MainCtrl', function($scope, $http) {
$scope.data = null;
$http.get("data.json").success(function (data) {
$scope.data = data;
});
});
View
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="datum in data">
<a>
<img ng-src="{{datum.thumbUrl}}" />
<br />Id : {{datum.id}}
<br />Purchase : {{datum.Purchase}}
</a>
</li>
</ul>
</body>

Angular JS - Ng-Repeat providing li's but not data inside

I have the following code usage of ng-repeat, I am getting 3 blank <li/> but not data within of 3 populations. Can someone help why?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
I think it should be:
<li ng-repeat="x in Cities">{{x.population}}</li>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{x.population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
You just forgot (x.population) otherwise it was OK.

The controller function is not being called

i'm learning AngularJs and i complete some courses in internet i know what is module, controller, service, i know some basics directives, and i found in internet a basic AngularJs video tutorial, i'm doing all like in this video but can't understand why it's not work.
Here is my code
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl">
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
It should insert new text in my array, but when i'm clikcking on the button nothing happens, and no error in console, i realy can't understand why?
The ng-click event is out of the controller's scope. The quick answer is to move ng-controller="todoCtrl" to an enclosing/outer element, which is body in this case.
Move the ng-controller attribute to the <body> - so that it incorporates the form and the ng-click event. For example:
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
The model and functions should be in scope to be used, so you need to have addTodo function called within todoCtrl scope. Just add a wrapper and have the controller there.
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl" class="wrapper">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
<div>
</body>
</html>

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