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>
Why does this not really work?
I have a field test.
But when I click on the <p> of child1 it will not affect the child2 <p>.
<div ng-init="test=false">
<div id="child1">
<p ng-click="test=!test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="test">
Clicked..
</p>
</div>
</div>
You need to define an angular module in JS and assign it using the ng-app directive. Like this:
<!DOCTYPE html>
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', []);
</script>
</head>
<body>
<div ng-init="test=false">
<div id="child1">
<p ng-click="test=!test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="test">
Clicked..
</p>
</div>
</div>
</body>
</html>
Every directive creates its own scope.
So,if you want to access the variable/object in parent scope, you need use $parent
<div ng-init="test=false">
<div id="child1">
<p ng-click="$parent.test=!$parent.test">
Click!
</p>
</div>
<div id="child2">
<p ng-if="$parent.test">
Clicked..
</p>
</div>
</div>
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