Is this possible with AngularJS? - javascript

Trying to execute the following code, using AngularJS.
So far I got this:
<ul>
<li ng-repeat='(key,value) in dset'><span>{{key}}</span>
<li ng-repeat="n in value"> {{ n }}</li> //DOES NOT WORK
</li>
</ul>
dSet: { "something" : [ "abc, "def" ], "something2": ["abc","blah"] }
Basically I have a Map> and want to print this as in:
String1
listValue1
listValue2
listValue3
...
String2
listValue1
listValue2
Please let me know if you have any thoughts on how to get this to work.

Suppose your dset is...
$scope.dset = {a: [1,2,3], b: [4,5,6]};
If you want your list-items to be nested, use:
<ul>
<li ng-repeat="(key, val) in dset"><span>{{key}}</span>
<ul><li ng-repeat="v in val">{{v}}</li></ul>
</li>
</ul>
If you want your list-items not to be nested, use ng-repeat-start and ng-repeat-end:
<ul>
<li ng-repeat-start="(key, val) in dset"><span>{{key}}</span>
<li ng-repeat="v in val" ng-repeat-end>{{v}}</li>
</ul>

Related

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!

Click an array element, show the element with the same index of another array

I have a list of elements which is plotted via a ng-repeat and I am using a ng-click to get the index of the element of the array I am clicking on.
This is the html code:
<ul>
<li ng-repeat="period in periodPercentage" ng-click="getIndex('{{period}}')">
{{period}}
</li>
</ul>
And this is what is inside the controller:
$scope.periodPercentage = ['a', 'b', 'c', 'd'];
$scope.getIndex = function(period) {
console.log($scope.periodPercentage.indexOf(period));
};
In another part of the code, I am using again an ng-repeat to show the elements of another array with the same length.
<ul>
<li ng-repeat="ratio in ratioPercentage">
{{ratio}}
</li>
</ul>
Is there a way to show only the {{ratio}} with the same index of {{period}} via ng-show and hide the other ones?
Thanks in advance for your replies!
It may help you.
<div ng-app ng-controller="testrahul">
<ul>
<li ng-repeat="(i,period) in periodPercentage" ng-click="getindex(i)">
{{period}}
</li>
</ul>
function testrahul($scope) {
$scope.periodPercentage = ['a', 'b', 'c', 'd'];
$scope.getindex = function(i){
console.log(i);
}}
You could do that:
<li ng-repeat="period in periodPercentage" ng-click="getindex($index)">
{{period}}
</li>
and
<ul>
<li ng-repeat="ratio in ratioPercentage" ng-show="$index == findex">
{{ratio}}
</li>
</ul>
see updated fiddle
Something along the lines of:
<ul>
<li ng-repeat="period in periodPercentage" ng-click="setvariable($index)">
{{period}}
</li>
</ul>
<ul>
<li ng-repeat="ratio in ratioPercentage" ng-show="someVariable == $index">
{{ratio}}
</li>
</ul>
function setVariable(index){ $scope.someVariable = index;}
One solution is this:
$scope.periodPercentage = ['a', 'b', 'c', 'd'];
$scope.ratePercentage = ['arate', 'brate', 'crate', 'drate'];
$scope.rateShowPercentage = angular.copy($scope.ratePercentage);
$scope.update = function(index){
$scope.rateShowPercentage = [$scope.ratePercentage[index]];
}
In the HTML
<div ng-controller="GreetingController">
<ul >
<li ng-repeat="period in periodPercentage" ng-click="update($index)">
{{period}}
</li>
</ul>
<ul >
<li ng-repeat="rate in rateShowPercentage" >
{{rate}}
</li>
</ul>
</div>
working code here
Somehing like:
<ul>
<li ng-repeat="object in list" ng-click="openOther($index)">
{{object.data}}
</li>
</ul>
<ul>
<li ng-repeat="object in otherListToShow">
{{object.data}}
</li>
</ul>
and:
var otherList = [ some data ...]
var otherListToShow = []
openOther(index){
listToShow.push(otherList[index])
}
you need to give $index into ng-click
<ul>
<li ng-repeat="period in periodPercentage" ng-click="getIndex('{{$index}}')">
{{period}}
</li>

AngularJS: How to display nested objects?

I have following (json) object:
[
{
name: "Foo",
children: [{
name: "bar",
children:[{
...
}]
}]
}
]
There can be any number of children/objects in any level. Now I want to get following HTML Code:
<ul>
<li>Foo</li>
<li>
<ul>
<li>Bar</li>
</ul>
</li>
<ul>
But of course there could be 10 or more levels with 20 or more children per level.
Is there any way to do that? Thank you very much!
this should work, just replace json array with your data
<script type="text/ng-template" id="nodes_renderer.html">
{{node.name}}
<ul ng-model="node.children" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.children" ng-include="'nodes_renderer.html'">
</li>
</ul>
</script>
<div data-drag-enabled="false">
<ul>
<li ng-repeat="node in #*JSON ARRAY*#" ng-include="'nodes_renderer.html'">
</li>
</ul>
</div>

AngularJS nested ng-repeats with a single index?

Using Angular 1.0.7, how can I specify a single index for nested ng-repeats, so that each item on the inner arrays get's a consecutive index value? (i.e. 0, 1, 2, 3 and so on for all elements in all inner arrays)
To illustrate:
<ul>
<li ng:repeat="item in arr1">
<ul>
<li ng:repeat="child in item.children">{{consecutiveIndex++}}</li>
</ul>
</li>
</ul>
I tried to achieve it in the following manner:
var cindex= -1;
$scope.cindex= function () {
console.log('cindex', cindex);
return ++cindex;
};
HTML:
<ul>
<li ng:repeat="item in arr1">
<ul>
<li ng:repeat="child in item.children">{{index()}}</li>
</ul>
</li>
</ul>
I am getting quite exotic AngularJS errors using this (believe me, you don't wanna know).
I have also found out (following the console output), that even for an array with a mere 4 elements, ng-repeat hit my cindex() function over 80 times. Meaning instead of 0, 1, 2 and 3 - I got 84, 85, 86 and 87.
Any ideas?
You can't depend on your {{index()}} to be called a fixed amount of times. Whenever angular decides to dirty check a scope it will run all the bindings.
You can generate the value based on other indexes. Demo plunker
HTML
<body ng:controller="MainCtrl">
<ul>
<li ng:repeat="item in arr1">
<ul ng:init="parentIndex = $index">
<li ng:repeat="child in item.children">{{getConsecutiveIndex(parentIndex, $index)}}</li>
</ul>
</li>
</ul>
</body>
JS
app.controller('MainCtrl', function($scope) {
$scope.arr1 = [{children:[0,1,2,3]}, {children:[4,5]}, {children:[6,7,8]}];
$scope.getConsecutiveIndex = function(parentIndex, $index) {
var total = 0;
for(var i = 0; i < parentIndex; i += 1) {
total += $scope.arr1[i].children.length;
}
return total + $index;
}
});
The ngRepeat directive provides a special $index property which should suit your needs. It is zero-based and is exposed on the local scope of each template instance.
Try this:
<ul>
<li ng:repeat="item in arr1">
<ul>
<li ng:repeat="child in item.children">{{$index + 1}}</li>
</ul>
</li>
</ul>

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

Categories

Resources