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!
Related
Hey i have problem i will using my length array filter in my controller ,the length value is visable in html view but i will use this value in controller
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="product.versions.tree" >
<li ng-repeat="node in (test=(product.versions.tree | filter:search.query))" ui-tree-node collapsed='collpsed' ng-include="'nodes_renderer.html'" ></li>
<p>{{test.length}}</p>
</ol>
I use the AngularJs to fetch the data from mySql database for my navigation bar on HTML5. The problem is I cannot open the link in the sub menu.
Here is my code :
<div id="header-wrapper" class="wrapper">
<div ng-app="myApp" ng-controller="customersCtrl" id="header">
<div id="logo">
<h1>Why Choose a Breeder ?</h1>
<p>Quality Quarantee Knowledge</p>
</div>
<nav id="nav">
<ul>
<li class="current">Home</li>
<li>Holland Lops
<ul>
<li>Bucks</li>
<li>Does</li>
<li>Junior</li>
</ul>
</li>
<li>For Sale</li>
<li>Article
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
</li>
<li>Contact us</li>
</ul>
</nav>
</div>
However I cannot open the link in this code (When I click on link, nothing happens):
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
But If I remove the ul like this :
<li>For Sale</li>
<li>Article</li>
<li ng-repeat="menu in menues">{{menu.Title}}</li>
I can open the link. I don't know what's wrong. Is it because the order of the navigation bar ? Could you please suggest me, what I'm wrong ?
This is my .js code :
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http',function($scope, $http){
$scope.menues = [];
$http.get("http://www.rhosgobelrabbit.com/getUrl.php")
.then(function (data) {$scope.menues = data.data.records;
}, function (error) {
alert('Error');
});
}]);
You need to use ng-href instead of href. You can read about this in the angularJS docs: Docs
<ul><li ng-repeat="menu in menues"><a ng-href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li></ul>
As long as the ng- aren't placed infront of the href will angular just give you a 404.
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>
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
I have problem with ng-click (I'm using angular 1.0.4). First ng-click works but second no.
<div class="menu-group" ng-repeat="module in modules">
<div ng-click="toggle($event, $parent)" class="group-head">{{module.group.name}} <span class="{{module.group.icon}}"></span></div>
<ul class="menu collapsed" ng-init="items = module.group.items">
<li ng-repeat="item in items" ng-click="openCategory($event, '{{item.name}}')">{{item.display}}</li>
</ul>
</div>
Generated code looks good:
<li ng-repeat="item in items" ng-click="openCategory($event, 'simpleName')" class="ng-scope ng-binding">Simple name</li>
Instead of '{{item.name}}' just use item.name
Demo: http://plnkr.co/edit/QNKZDT9N5k2tQaRrFlwY?p=preview