Getting Dynamic id (from AngularJS) in getElementByID - javascript

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

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!

Is this bug for using AngularJS to fetch data to <li><a href> or not?

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.

ng-class is messing up with static and dynamic content

I have introduced ng-repeat where static contents are already there. Its working properly. When i put ng-class and set the variable its not working. How to fix that issue and why its happening.
Click on each li. Its not working on dynamic elements.
Please find the code in fiddle.
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-class='{"selectedClass":classHilight==1}' ng-click="filterNews(3);classHilight=1"> My static content 1</li>
<li ng-class='{"selectedClass":classHilight==2}' ng-click="filterNews(3);classHilight=2" > My static content 2</li>
<li ng-class='{"selectedClass":classHilight==3}' ng-click="filterNews(3);classHilight=3"> My static content 3</li>
<li ng-repeat="item in items" ng-class='{"selectedClass":classHilight==item.id}' ng-click="filterNews(item.id);classHilight=item.id" >My Dynamic Content {{item.id}}</li>
</ul>
http://jsfiddle.net/gowthambsvg/2m41tjq9/
It is said that, You must always have . in your model.
In ng-repeat classHilgiht doesn't refer to the scope variable classHilight. It creates its own scope for each item in ng-repeat. It does not refer to classHilight. But when classHilight is used as key of test object, object inherits the property from the child scope of the ng-repeat directive.
Try this:
var m = [{
id: 4
}, {
id: 5
}, {
id: 6
}];
function MyCtrl($scope) {
$scope.test = {};
$scope.items = m;
$scope.setClass = function() {
}
}
.selectedClass {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-class='{"selectedClass":test.classHilight==1}' ng-click="test.classHilight=1">My static content 1</li>
<li ng-class='{"selectedClass":test.classHilight==2}' ng-click="test.classHilight=2">My static content 2</li>
<li ng-class='{"selectedClass":test.classHilight==3}' ng-click="test.classHilight=3">My static content 3</li>
<li ng-repeat="item in items" ng-class='{"selectedClass":test.classHilight==item.id}' ng-click="test.classHilight=item.id">My Dynamic Content {{item.id}}</li>
</ul>
</div>
Fiddle here
Edit: One can not say classHilight is not updated in ng-repeat, it is being updated but within its own scope. [Ref]

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})};
});

AngularJS ng-click event is not firing when inside nested ng-repeat

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

Categories

Resources