Develop Reference

Expandable ng-repeat from Json AngularJS

I am trying to do collapsing <ul></ul> - after click age i want to collapse under name and then the deeper json structure. Now i am in that moment :
<div ng-repeat="key in messages">
<ul ng-repeat=" (x, y) in key">
<li>{{y.age}}</li>
<li style="margin-left:15px;" ng-repeat="(a,b) in y.names" >{{b.name}}</li>
<ul style="margin-left:35px;" ng-repeat="p in a.full_name" >
<li>{{p}}</li>
</ul>
</ul>
</div>
My plunker :
http://plnkr.co/edit/902dF10onLRdAvo3gRBa?p=preview
I don't know how to get full_names from json.
Thanks for answers in advance!

Show sub li in Angular

I have the following code:
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items | filter:searchText" ng-click="item.expanded = !item.expanded">
{{item.name}} {{templatefolder.expanded}}
<ul ng-show="item.expanded" class="list-group-item">
<li class="list-group-item" ng-class="{'active' : item.id == document.itemId}" ng-repeat="folder in item.folders" ng-click="document.itemId= item.id">
{{folder.name}}
</li>
</ul>
</li>
</ul>
That code works. But, when i click a 'sub item' (item.folders.name) the li is collapsing because he is in the li with the ng-click function.
Is there a way to show the item.folders after a click on a item?

Add $event.stopPropagation(); to your child li so the event doesn't propagate to the parent.
ng-click="document.itemId= item.id; $event.stopPropagation();">

When building a tree using ng-include, my 'ng-click' is not working

I'm building a tree using the following code with 'ng-include', and it's looking fine:
<script type="text/ng-template" id="tree_node.html">
<a ng-click="select(this, data, $event)">{{data.name}}</a>
<ul>
<li ng-repeat="data in data.children track by $index" ng-include="'tree_node.html'"></li>
</ul>
</script>
<div>
<ul>
<li ng-repeat="data in venueTree track by $index" ng-include="'tree_node.html'"></li>
</ul>
</div>
The problem is that when clicking on the {{data.name}}, the 'select' function isn't called in my controller. I have no javascript errors, just nothing happens.

reapter creating new scopes to you can access parent scope using $parent or ng-init like ie:
please see here: http://jsbin.com/xowub/3/edit
html:
<li ng-repeat="data in venueTree track by $index" ng-include="'tree_node.html'" ng-init="parent=this"></li>
script:
<script type="text/ng-template" id="tree_node.html">
<a ng-click="parent.select(this, data, $event)">{{data.name}}</a>
<ul>
<li ng-repeat="data in data.children track by $index" ng-include="'tree_node.html'"></li>
</ul>
</script>

I'm not sure I understand your problem. The ng-click seems to work just fine in this Plunk I made.
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.venueTree = [{children:[{name:'one'},{name:'dos'}]},{children:[{name:'drei'},{name:'fyra'}]}];
$scope.select = function(a,b,c){alert(b.name); console.log({a:a, b:b, c:c})};
});

Javascript Get active menu item data-option-value and put it into a VAR

<div class="option-combo department">
<span class="label_menu">Department:</span>
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li class="department-button">All</li>
<li class="department-button">Sales</li>
<li class="department-button">Marketing</li>
<li class="department-button">Training</li>
<li class="department-button">Communications</li>
</ul>
</div>
I want to get the active list items attribute, data-option-value, and add it to the commiunication data-option-value dynamically
I am using isotope

Try this to filter out the other classes and just show the specific communications for each department
<li class="department-button">Communications</li>

Getting Dynamic id (from AngularJS) in getElementByID

I have a clickable drop-down List as following:
<ul class="dropdown">
<li ng-repeat="item in items" ng-controller="ListCtrl">
{{item.name}}
</li>
</ul>
I have following code of AngularJS in same html page :
<li ng-repeat="item in items" ng-controller="ListCtrl">
<div id="{{item.itemIndex}}">
Some Code Here
</div>
</li>
Now i want to add each div in to my page when click on the list item every time. I calling addWidget() function like this :
<script type="text/javascript">
function addWidget(){
document.getElementById('').style.display='block';
}
</script>
Now My question is if i assign a static id to div and passing it in to getElementByID then it works fine but in the dynamic case how i pass the id so it will work fine in each case ?

You don't want to be adding javascript like that.
Here is an example of how to do this:
<body ng-app="myApp">
<div ng-controller="ListCtrl">
<ul class="dropdown">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-show="item.show">
<div>Some Code Here</div>
</li>
</ul>
</div>
</body>
And your controller:
function ListCtrl($scope){
$scope.items = [{name: 'one'}, {name: 'two'}];
$scope.addWidget = function(item){
item.show = !item.show;
};
};
And finally a working example is here on jsfiddle