Pardon me if the question sounds weird. Suppose I have the following object:
// For example purposes, pretend that link gets pushed to $scope.links 5 times.
var link = {
name: "name",
description: "description",
members: [{
memname: "member name"
}],
active: true
}
$scope.links.push(link);
...and I used $scope.links as follows
<li ng-repeat="item in links">
<li ng-repeat = "member in item.members">
...
</li>
</li>
...and inside the list with member in item.members, I want to use link.active for ng-show. Is it possible to do so?
Something like:
<li ng-repeat="member in item.members" ng-show="item.active">.
Please advise.
Thank you.
Created Snippet for you .
function myCtrl($scope) {
$scope.links = [{
'name': "name",
'description': "description",
'members': [{
'memname': "member name"
},{
'memname': "member name 2"
}],
'active': true
},{
'name': "name 2",
'description': "description",
'members': [{
'memname': "member name"
},{
'memname': "member name 2"
}],
'active': false
}]
//$scope.links.push(link);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="item in links" ng-show="item.active == true">
{{item.name}}
<ul >
<li ng-repeat = "member in item.members" >
{{member.memname}}
</li>
</ul>
</li>
</ul>
</div>
Hope this will help you.
Related
I am trying to iterate following json inside ng-repeat but not working. I would like to get both Ques and img. Below, I have tried "Ques" part but it doesn't display anything.
[{
"Ques": [{
"column1": "3",
"column2": "ok?"
}, {
"column1": "4",
"column2": "test"
}],
"img": [{
"column1": "21",
"column2": "CDH.PNG"
}, {
"column1": "22",
"column2": "Feedback.PNG"
}]
}]
My code given below
var messages = JSON.stringify(response.data);
$scope.messages = JSON.parse(messages);
<div class="list-group-item" ng-repeat="item in messages.Ques">
<h4 class="list-group-item-heading">{{item.column2}}</h4>
<p class="list-group-item-text">{{item.column1}}</p>
</div>
I have done this way. Its working. I can also use "Img" same like below.
<div class="list-group-item" ng-repeat="item in messages">
<div ng-repeat="items in item['Ques']">
<h4 class="list-group-item-heading">{{items.column2}}</h4>
<p class="list-group-item-text">{{items.column1}}</p>
</div>
</div>
I have a dynamically created data. Based on this I am creating a form. But problem is option is not added to to the select. What is wrong in this.
customerB :
{
rows:3,
columns: 2,
name: 'customerB',
fields:
[
{type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
],
}
HTML
<div class="rows" ng-repeat="field in customerB">
<div class="columns" ng-repeat="newvalue in field">
<div class="controls" ng-switch="newvalue.type">
<div class="form-group">
<label class="control-label">{{newvalue.label}}</label>
<select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check">
</select>
</div>
</div>
</div>
</div>
You got an object which got an array, inside the array you got another array which is not correctly manipulating.
Try understanding the following code snippet:
HTML:
<select name="repeatSelect" id="repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
JS
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
]
OR follow the link: https://docs.angularjs.org/api/ng/directive/select
This assumption might be wrong but I think in here ng-repeat="field in customerB" you are accessing object property directly without the scope variable. So you need to add whatever the scope variable name in front of the property name.
<div class="rows" ng-repeat="field in obj.customerB">
Other than that code you provided work perfectly.
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.obj = { customerB :
{
rows:3,
columns: 2,
name: 'customerB',
fields:
[
{type: "select", name:"teacher_id", label: "Teacher" , endpoint: "/teachers", required: true, check:[ { id : "1982", name : "Mr Bob"}, { id : "18273", name : "Mrs Katrine"} ]}
],
}}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="rows" ng-repeat="field in obj.customerB">
<div class="columns" ng-repeat="newvalue in field">
<div class="controls" ng-switch="newvalue.type">
<div class="form-group"> <label class="control-label">{{newvalue.label}}</label> <select class="form-control" ng-switch-when="select" ng-model="hiii" ng-required="newvalue.required" ng-options="item.id as item.name for item in newvalue.check"></select> </div>
</div>
</div>
</div>
</div>
i am new in angular. so i was reading write up just to accomplish my job. this way i will try but not sure that am i going in right direction? here is my sample code
<ul>
<li ng-repeat="parent in items">{{parent.pitem}}
<ul>
<li ng-repeat="child in parent.citems">{{child.pitem }}</li>
</ul>
</li>
</ul>
var app = angular.module('myapp', []);
app.controller('MyCtrl', function ($scope) {
$scope.items = [{ "pitem": "Coffee", "citems": "" }, { "pitem": "Tea", "citems": [{ "pitem": "Black tea", "citems": "" }, { "pitem": "Green tea", "citems": "" }] }, { "pitem": "Milk", "citems": "" }]
});
i actually i need to show employee hierarchy like manager and their subordinate.
i also read this too on the same kind of topic written by #zsong https://stackoverflow.com/a/18295177/6188148
so please help me to generate tabular output with ng-repeat using ul,li and end user should be able to expand collapse rows too. please have a look at this url http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html i want similar kind of output but with ng-repeat.
see this url http://www.lidorsystems.com/support/articles/angularjs/treegrid/tree-grid-filter.aspx then can understand what kind of output i am trying to build with ng-repeat.
please guide and suggestion.
This JSFiddle https://jsfiddle.net/benfosterdev/NP7P5/ shows exactly what you are looking for:
Recursion
<div ng-app="app" ng-controller='AppCtrl'>
<script type="text/ng-template" id="categoryTree">
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-include="'categoryTree'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>
</div>
Json object
$scope.categories = [
{
title: 'Computers',
categories: [
{
title: 'Laptops',
categories: [
{
title: 'Ultrabooks'
},
{
title: 'Macbooks'
}
]
},
{
title: 'Desktops'
},
{
title: 'Tablets',
categories: [
{
title: 'Apple'
},
{
title: 'Android'
}
]
}
]
},
{
title: 'Printers'
}
];
});
I'm trying to do a tree menu on my site.
I want the subitems to show/hide when I click the parent.
This solution don't work. Even tho it changes the item.active value to false/true. Any ides my friends?
Here is my HTML:
<div id="sidebar-wrapper">
<div class="cssTreeMenu tree">
<ul class="sidebar-nav">
<li ng-repeat="item in items" >
<a ui-sref="{{item.sref}}" ui-sref-active="active" ng-click="testcolaps($index)">{{item.name}}</a>
<ul ng-show="{{item.active}}" class="navbarColorOnClick">
<li ng-repeat="subItem in item.subItems" ui-sref-active="active">
<a ui-sref="{{subItem.sref}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
Here is my controller:
$scope.testcolaps = function (index) {
$scope.items[index].active = !$scope.items[index].active;
};
$scope.items = [
{
name: "Test",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu",
sref: "kpi.selectableKpiMenu"
},
{
name: "Test",
sref: "kpi.test"
}
]
},
{
name: "Test2",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu 2",
sref: "kpi"
},
{
name: "Test 2",
sref: "internal"
}
]
},
];
As you can se my items have a active: property who I change to true/false. But still nothing happens in my menu. If I hard-code it to true it is showing like it should but still the click-event doesn't work.
The expression inside the ng-show need an expression without {{}} interpolation. Basically you need to remove {{}}.
ng-show="item.active"
My code is as follows (the fiddle):
<div ng-controller="myCtrl">
<div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
<div ng-init="popovers = [
{ name: 'Popover1',
displayName: 'Pop over with two tabs',
tabs: [
{ name: 'Tab1',
displayName: 'First tab',
description: ['First tab description']
},
{ name: 'Tab2',
displayName: 'Second tab',
description: ['Second tab description']
}
]
}
]"/>
<b>Tabs in popover</b>
<div
class="popover"
ng-repeat="p in popovers"
>
Popover name: {{p.displayName}}
<div ng-repeat="t in p.tabs"
class="tab"
ng-class="currentTab==t.name?'selected':''"
ng-click="currentTab=t.name"
>
{{t.name}}
</div>
<div ng-repeat="t in p.tabs"
class="tabContent"
ng-class="currentTab==t.name?'selected':''"
>
<p>{{t.displayName}}</p>
</div>
</div>
</div>
There is something I don't get which make the code not working perfectly, as the selected class name is never removed as one click on the tab.
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab.
Updated Fiddle