I have a list of parents: ['a','b','c'],
and 3 lists of children:
$ctrl.aChildren = ['aa','aaa']
$ctrl.bChildren = ['bb','bbb']
$ctrl.cChildren = ['cc','ccc']
I'd like to access these 3 variables in the inner <li> using variable parent from outer <li>
<li ng-repeat="parent in $ctrl.parents">
....
<ul>
<li ng-repeat="child in $ctrl[{{parent}} + 'Children']">
</li>
</ul>
...
</li>
I got an error saying
'{' is an unexpected
Thanks
You don't need put {{}}.It should be like this
<li ng-repeat="parent in $ctrl.parents">
{{parent}}
<ul>
<li ng-repeat="child in $ctrl[parent + 'Children']">
{{child}}
</li>
</ul>
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
var $ctrl = this;
$ctrl.parents = ['a', 'b', 'c'];
$ctrl.aChildren = ['aa', 'aaa']
$ctrl.bChildren = ['bb', 'bbb']
$ctrl.cChildren = ['cc', 'ccc']
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="ctrl as $ctrl">
<li ng-repeat="parent in $ctrl.parents">
{{parent}}
<ul>
<li ng-repeat="child in $ctrl[parent + 'Children']">
{{child}}
</li>
</ul>
</li>
</div>
You no need to add {{}} inside ng-repeat directive. Replace the following code
<li ng-repeat="child in $ctrl[{{parent}} + 'Children']">
with
<li ng-repeat="child in $ctrl[parent + 'Children']">
Related
I want to change {{order.status}} to def when someone click updatestatus button.
<ul>
<li ng-repeat="order in orders">
<!--
<div ng-model="row[order.id]" >abc</div>
-->
<div ng-model="row[order.id]" >{{order.status}}</div>
updatestatus
</li>
</ul>
Controller
$scope.row = {};
$scope.changestatus = function(id) {
//console.log(id);
$scope.row[id] = 'def';
}
It does not work. Please help.
You don't need ng-model here. ng-model is used for inputs, textarea, select or custom form elements https://docs.angularjs.org/api/ng/directive/ngModel
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Here, you just need to update the view. For this ng-bind is used https://docs.angularjs.org/api/ng/directive/ngBind
<div> ng-bind="row[order.id]"></div> and <div>{{ row[order.id] }}</div> are similar
UPDATE
<ul>
<li ng-repeat="order in orders">
<div>{{ order.status }}</div>
Update Status
</li>
</ul>
Controller:
$scope.changestatus = function(order) {
//console.log(order.id);
order.status = 'the update status'; // status changed
}
Use {{row[order.id]}} instead of abc in your view and remove ng-model within your div.
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Or
<ul>
<li ng-repeat="order in orders">
<div ng-bind="row[order.id]"></div>
updatestatus
</li>
</ul>
Directive template :
<script type="text/ng-template" id="child-map.html">
<b ng-click="selectNode(child.id)">{{child.title}}</b>
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children" ng-include="clild-map.html"></li>
</ul>
</script>
<b ng-click="selectNode(mapData.id)">{{mapData.title}}</b>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children" ng-include="child-map.html" ></li>
</ul>
Directive definition :
function widgetNodeMap () {
var nodeMap = {};
nodeMap.restrict = 'E'
nodeMap.scope = {
'mapData' : '=mapData'
}
nodeMap.controller = ['$scope',function($scope){
// $scope.currentNode = $scope.mapData.id;
$scope.selectNode = function(node_id){
$scope.currentNode = node_id;
}
$scope.getCurrentNode = function(){
return $scope.currentNode;
}
}];
nodeMap.templateUrl = '/static/app/components/widget/widget.view.node-map.html';
return nodeMap
}
Main template :
<widget-node-map map-data="navCtrl.mapData">
</widget-node-map>
But still i cannot get the data listed properly. Can you help me, where Im wrong?
I figured the solution
<script type="text/ng-template" id="child-map.html">
<ul ng-if="child.children.length">
<li ng-repeat="child in child.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</script>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12">
<a ng-click="selectNode(mapData)">{{mapData.title}}</a>
<ul ng-if="mapData.children.length">
<li ng-repeat="child in mapData.children">
<a ng-click="selectNode(child)">{{child.title}}</a>
<div ng-include src="'child-map.html'"></div>
</li>
</ul>
</div>
</div>
I have a parse syntax error when i try this :
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed{{post.idFB}}">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
problem is the line <li ng-repeat="feed in feed{{post.idFB}}">, what is the good syntax ?
result expected is like feed846097918756247
The online app: http://www.monde-du-rat.fr/pmr/
EDIT : jmb.mage solution :
<ul ng-init="myFeed = myFeedFunction(raterie.idFB);">
<li ng-repeat="feed in myFeed | limitTo:1">adoptions are : {{feed.title}}</li>
<li ng-repeat="feed in feed846097918756247 | limitTo:1">search is : {{feed.title}}</li>
<ul>
only second li works, not the first with the automatically variable
I'd use only a feed object as follow, scope.feed[scope.posts[index].idFB]= 'whatever'
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed[post.idFB]">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
If feed846097918756247 is a JavaScript object than you could do something like this
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul ng-init="var myFeed = eval('feed' + post.idFB);">
<li ng-repeat="feed in myFeed">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
Although since it's using eval(), you may need to do the ng-init with a function like:
<ul ng-init="var myFeed = myFeedFunction(post.idFB);">
and then have a function in your controller:
function myFeedFunction(pId) {
return eval('feed' + pId) ;
}
I have an application created with AngularJS which has a strip of menus. What I am trying to do is to create submenus with each menu. The submenus can be created by adding additional <ul> <li> ... </li> </ul> under my existing list items of menus. How can I do it?
This is my code with AngularJS calls:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} {{page.subMenu}}
</li>
</ul>
</div>
This generates the following code in HTML with div of id=menu:
<ul>
<li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Introduction</a>
</li>
<li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Cases</a>
</li>
...
...
</ul>
AngularJS JS code
The Angular JS Code to compliment above HTML is:
data.title = 'Amanpour consult Petrochemicals & Energy';
data.pages = [];
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};
....
data.pages[0].slides[1]
....
data.pages[0].slides[2]
....
data.pages[0].slides[3]
Now to add the submenu, I thought may be I could following to AngularJS code:
data.pages[0].subMenu = '<ul> <li> First Link </li> <li> Second Link </li> </ul>';
and then call it in HTML like this (notice the {{page.subMenu}}):
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} **{{page.subMenu}}**
</li>
But it doesn't work, all it gives me is the following, which just prints the HTML literally on the page:
<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>
Update
I'd have to create a menu within JS like this:
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = 'Menu 1';
data.subMenu[0].list[1] = 'Menu 2';
data.subMenu[0].list[2] = 'Menu 3';
and would have to call it in my HTML like this:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-repeat="smenu in data.subMenu">
{{smenu.list[smenu]}}
</li>
</ul>
</li>
</ul>
</div>
The only problem is that I'd have to do the looping right; I am not able to make the index within the loop correctly.
I'm not quite sure if this is what you were looking for but take a look at this jsfiddle : http://jsfiddle.net/Marabyte/dxBe8/
In the HTML you have the structure for two nav, the main nav, the sub nav and respective ul/li
<section ng-app ng-controller="navCtrl">
<nav class="main">
<ul class="ul-nav">
<li class="li-nav li-main" ng-click="select($index)" ng-repeat="list in lists">{{list.name}}</li>
</ul>
</nav>
<nav class="sub" ng-show="subMenuShow">
<ul class="ul-nav ul-sec">
<li class="li-nav li-main" ng-repeat="sublist in sublists">{{sublist}}</li>
</ul>
</nav>
</section>
In your controller you have 2 lists for the main and sub nav.
function navCtrl($scope) {
$scope.lists = [{
name: "Cinema"
}, {
name: "TV Shows"
}, {
name: "Music"
}, {
name: "Awards"
}];
$scope.subMenu = [
["Snatch", "Rockrolla"],
["Sherlock", "Game of Thrones"],
["The National", "Johnny Cash", "Xutos & Pontapés"],
["Oscars", "Golden Globes", "Emmys", "BAFTA"]
];
$scope.select = function ($index) {
$scope.sublists = $scope.subMenu[$index];
$scope.subMenuShow = true;
};
}
The select() function is showing the subMenu based on the index of the main list.
Hope it helps!
Hugo
I am using angularjs to render a hierarchical structure. The test case is at http://jsbin.com/agodoj/1/edit
My question is why ng-repeat stop working at level 3 ? Thanks
Here is my model
function Test($scope) {
$scope.cars = {
chrylser: {
nameplates: [{
name: "np1",
trims: [
"tirm1", "trim2"
]
}]
}
};
}
Here is my template
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}</li>
<ul>
<li ng-repeat="trim in np.trims">
(ng-repeat stop working here) {{trim}}
</li>
</ul>
</ul>
</div>
</div>
Just need to move the closing </li> tag after your inner <ul>. You had the <li ng-repeat="np in value.nameplates"> immediately closing, ending the loop.
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}
<ul>
<li ng-repeat="trim in np.trims">
works! {{trim}}
</li>
</ul>
</li>
</ul>
</div>
</div>