Angular : ng-repeat not working - javascript

Here is my code , i take it from w3school.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
</html>
ng-repeat in second block is not working.
here is the output i get on browser
Please help me out


Angular only bootstraps the first found application on the page, i.e. the first container with ng-app attribute. The second one you put, ng-app="" will be ignored. Although, you could manually bootstrap the second one with angular.bootstrap method, in your case it makes more sense to wrap entire body into the same app and remove the second ngApp directive:
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview


you can have only one ng-app in html page
so change your code as
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>


The problem is, that only one ng-app can be automatically bootstrapped per webpage. So the second ng-repeat does not get parsed because it is not contained within an app.
You need to manually bootstrap your apps with angular.bootstrap()
https://docs.angularjs.org/api/ng/function/angular.bootstrap


This part of your code
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
does not have an ng-app
ng-repeat only works within an ng-app

Related

Ember.js index not working

I am attempting to create an Ember.js SPA within an ASP.NET MVC5 application. I am using the sample project provided at the weblink below. In it, I have created a new index.cshtml along with application.js and routes.js file. However, the handlebars template is not executing. Below is my code. Does anyone know why this is not working?
All I want is for the menu with the About text to display and for me to click on the About link and see the text "About this app....". Currently, All I see is the text "Test About", so I am inclined to believe that the implementation is done correctly.
https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
EfaAppTabs.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<h1>Test About</h1>
<script type="text/x-handlebars" data-template-name="EfaEmberApp-1.0.0">
<div class="container">
<div class="page-header">
<h1>Movies</h1>
</div>
<div class="well">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li>{{#linkTo 'about'}}About{{/linkTo}} </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
{{outlet}}
</div>
</div>
</div>
<div class="container">
<p>©2018 EFA</p>
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<div class="container"></div>
<h3>About this app...</h3>
</script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jquery-ui")
#Scripts.Render("~/bundles/ember")
#Scripts.Render("~/bundles/Efa")
</body>
</html>
EfaEmberApp-1.0.0.js
window.App = Ember.Application.create();
EfaEmberRoutes-1.0.0.js
// Routes
App.Router.map(function () {
this.route('about');
});

Not able to loop values in angularjs

I have a code and I want to loop throught the array in json format by using ng-repeat and ng-init.
But the code isn't working.
Below is the following code.
<!DOCTYPE html>
<html ng-app="">
<head>
<title></title>
</head>
<body>
<h1>
ng - repeat
</h1>
<hr />
<div ng-init="myFavLan=[{name:'PHP',extension:'.php'},
{name:'Javascript',extension:'.js'},
{name:'HTML',extension:'.html'}
]">
<p ng-repeat="language in myFavlan">
Name : {{ language.name }} <br />
Extension : {{ language.extension }}
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>
</html>
Please note that I am a beginner in angularjs

Javascript is case-sensitive, so the variable myFavlan you have in the ng-repeat is undefined. Just change
<p ng-repeat="language in myFavlan">
to
<p ng-repeat="language in myFavLan">
You could also change your ng-init variable.

It should be myFavLan Change
From
<p ng-repeat="language in myFavlan">
To
<p ng-repeat="language in myFavLan">
DEMO
<!DOCTYPE html>
<html ng-app="">
<head>
<title></title>
</head>
<body>
<h1>
ng - repeat
</h1>
<hr />
<div ng-init="myFavLan=[{name:'PHP',extension:'.php'},
{name:'Javascript',extension:'.js'},
{name:'HTML',extension:'.html'}
]">
<p ng-repeat="language in myFavLan">
Name : {{ language.name }} <br />
Extension : {{ language.extension }}
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>

AngularJS ng-repeat from json string

I am trying to find tasks from a project and display them in separate div .
Following json string is my data source which is within {{projects}} variable.
[{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}]
I have tried
{{projects}}
<li class="list-group-item" ng-repeat="p in projects">
<div class="nm">
{{p.value[$index].projectName}}
</div>
<div class="taskBtn">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
</div>
<div id="taskList{{post.id}}" class="collapse">
{{p.value[$index].name}}
</div>
</li>
This outputs following
Could you tell me how do i get the looping properly and get Something like
Project name :
Task lists :
project name :
tasks lists:
Project name :
Task lists :
project name :
tasks lists:

Use ng-repeat inside an ng-repeat
Your DOM
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="Proj">
<ul ng-repeat="p in projects">
<ul>
<li ng-repeat="item in p.value">
{{item.name}}
</li>
</ul>
</ul>
</body>
</html>
Controller code:
angular.module('App', []).controller('Proj', function ($scope) {
$scope.projects = [{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}];;
});
http://plnkr.co/edit/4RaxuzA3YXRIG8LvPwlr?p=preview

This Nested ng-repeat can b your solution...
<li class="list-group-item" ng-repeat="p in projects">
<div class="nm">
{{p.value[$index].projectName}}:
<ul ng-repeat="t in p.value">
<li>{{t.name}}</li>
</ul>
</div>
<div class="taskBtn">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button>
</div>
<div id="taskList{{post.id}}" class="collapse">
{{p.value[$index].name}}
</div>
</li>

How to connect the ng-model of two different controller in angularjs?

I have one table which will fill with the JSON data. After the filling table, If some one wants to modify any row then it will pop-up window, where you can modify.
What I am doing:
I made two controller, I want to pass the ng-model value from one controller to other controller which is controller for window.
Please tell me how to connect these two controller.
Please see the running example,
http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="task.title" />
<input type="text" ng-model="task.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
});
app.controller('TaskController', function($scope, $rootScope){
$scope.editTask=function(task){
$rootScope.task=task;
}
});
</script>
</body>
</html>

First, place your ng-app="myApp" and ng-controller="tasksCtrl" to the body element.
E.g.
<body ng-app="myApp" ng-controller="tasksCtrl">
Then, move the
$scope.editTask=function(task) {
$scope.task = task;
};
To the tasksCtrl. The TaskController is no longer needed. You can remove it.
Since, it only use one controller you can use $scope instead of $rootScope.
Here's the Plunkr.
Hope it helps.

What you are trying to do would create a tight coupling between controllers but from what I see in the plunkr you would be better off with using angular-ui modal and just instantiate the modal window from code.

There are few mistakes that you did
First one that you modal html code is not inside ng-app
and you can use is Parent Child Concept of Angular ,In which you have no need to use $rootScope
Pluncker having complete solution of your problem:http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview
Html:
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="Edittask.title" />
<input type="text" ng-model="Edittask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Controller:
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task){
$scope.selectedTask=task;
}
});
app.controller('TaskController', function($scope, $rootScope){
$scope.Edittask={};
$scope.Edittask.title="";
$scope.Edittask.description="";
$scope.saveTask=function(){
console.log('called');
$scope.selectedTask.title=$scope.Edittask.title;
$scope.selectedTask.description=$scope.Edittask.description;
}
});

If you need to access any methods in other controller and pass the data you could do like this,
angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);

Alternatives to ng-include in angularjs possible?

For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram

bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});

Categories