Develop Reference

access to scope of each ng-repeat item

I am sort of new to angularjs. I am using ng-repeat to list entities in my page, each entity object has an href property to it's fields. I want when someone clicks on the link, retrieve the fields and show them on another nested ul below the parent entity.
here's my html:
<ul>
<li class="" ng-repeat="entity in entities" >
{{entity.name}}
<a class="entity-fields" ng-click="retrieveFields(entity.fields.href)" >fields</a>
<ul class="fields" >
<li class="fields" ng-repeat="field in fields" > {{field.name}} </li>
</ul>
</li>
</ul>
and this is my javascript:
myApp.controller('excelController', ['$scope', '$http', function($scope, $http) {
$scope.baseUri = "http://localhost:8080/rst/api/v1/introspection";
$scope.entitiesUri = $scope.baseUri + "/entities";
$scope.retrieveFields = function(href){
$http.get(href).then(function success(response){
$scope.fields = response.data;
});
};
$http.get($scope.entitiesUri).then(function success(response){
$scope.entities = response.data;
});
}]);
but when I click on the link and retrieve fields of an entity, it shows them below all of the entities.
how can I make it to only show the fields in the scope of each item.
Thanks in advance

You have to change some part of your code
<ul>
<li class="" ng-repeat="entity in entities track by $index" >
{{entity.name}}
<a class="entity-fields" ng-click="retrieveFields($index,entity.fields.href)" >fields</a>
<ul class="fields" >
<li class="fields" ng-repeat="field in entity.fieldItems" > {{field.name}} </li>
</ul>
</li>
then You need to change your retrieve function as:
$scope.retrieveFields = function(index,href){
$http.get(href).then(function success(response){
$scope.entities[index].fieldItems = response.data;
});
};
This should fix your problem.

"ng-class" on each clicked item

I need to add a class on selected <li> like I have shown in demo but dont want it to be removed if I click on another <li>.
Please help
<div ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': model.selected==item}" ng-click="model.selected=item">{{ item.name }}</li>
</ul>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.model = {
selected: null,
items : [
{name: "Apple"},
{name: "Banana"},
{name: "California"}
]
};
})
demo

Just add like this
<div ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': selected==$index}" ng-click="selected=$index">{{ item.name }}</li>
</ul>
</div>

Angular Application tutorial

I am following tutorial for Angular JS on their website.
Instead of the dropdown for selecting the order[Alphabetically or Newest], I made two buttons for it and defined ng-click on them.
Here is my code:
HTML Partial CODE:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Sort by: </li>
<li class="active">Newest</li>
<li>Alphabetical</li>
</ul>
<ul class="left">
<li class="divider"></li>
<li class="has-form">
<input type="text" ng-model="query" placeholder="Find Stuff"> </li>
</ul>
</section>
</nav>
<div class="row">
<ul class="phones">
<li ng-repeat="phone in phones | filter: query | orderBy: orderProp" class="thumbnail">
<img src="" alt="" ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
AND MY CONTROLLER:
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
$scope.phones= Phone.query();
$scope.orderProp= 'age';
$scope.setOrder= function(order) {
$scope.orderProp= order.toString();
}
}]);
Routers:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Setorder function is being called when I am clicking on Link, however I cannot see changes in Order listing.
What I am doing wrong here?

there is some typo in your jsfiddle example...
first you should put filter statement into ng-repeat expression...
<li ng-repeat="todo in todos | orderBy: order">
second, you order by name but your object has no field with the name so change your object text field to name or reverse...
$scope.todos = [
{name:'learn angular', done:true, age: 0},
{name:'build an angular app', done:false, age: 1}];
here is fixed JSFIDDLE...

How do I properly ng-repeat through nested key value pairs in angularJS

View live code:
Angular JS
How in the world do I properly loop through nested key value pairs and properly output them like below?
View I want is a tree like so
-touts
-classes
-col-12
-col-md-12
-col-lg-12
Currently the view is:
touts
{"classes":["col-12","col-md-12","col-lg-12"]}
JS:
var currentApp = angular.module('currentApp', []);
currentApp.controller('ACtrl', function($scope){
$scope.templates = {
'touts' : [
{
'classes' : ['col-12', 'col-md-12', 'col-lg-12' ]
}
]
};
});
HTML:
<div ng-app="currentApp">
<div ng-controller="ACtrl">
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<li>
<ul ng-repeat="class in templates[key]">
<li>{{class}}</li>
</ul>
</li>
</ul>
</div>
</div>

You are pretty close, I updated the fiddle. http://jsfiddle.net/y9wj6/9/
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<ul ng-repeat="val in prop">
<ul ng-repeat="(o, values) in val">
<li>{{o}}</li>
<ul ng-repeat="i in values">
<li>{{i}}</li>
</ul
</ul>
</ul>
</ul>

You must think gradually.
templates = {'touts' : [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]};
// key = 'touts'
// props = [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]
// props[0] = {'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }
// classkey = 'classes'
// classprop = ['col-12', 'col-md-12', 'col-lg-12' ]
// and print classprop by ng-repeat
So you can try this:
<div ng-app="currentApp">
<div ng-controller="ACtrl">
<ul ng-repeat="(key, props) in templates">
<li>{{key}}</li>
<li>
<ul ng-repeat="(classkey, classprop) in props">
<li>{{classkey}}</li>
<li>
<ul>
<li ng-repeat="class in classprop">
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

So this is pretty old question, however if you modified the object a bit (swap the array types for objects) the following template should work just fine.
angular.module('init', [])
.controller('test', ['$scope', function($scope) {
$scope.templates = {
'touts': {
'classes': {
'col-12': {},
'col-md-12': {},
'col-lg-12': {}
}
}
};
}]);
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="init" ng-controller="test">
<script type="text/ng-template" id="recursive_item.html">
{{key}}
<ul>
<li ng-repeat="(key, prop) in prop" ng-include="'recursive_item.html'"></li>
</ul>
</script>
<ul>
<li ng-repeat="(key, prop) in templates" ng-include="'recursive_item.html'"></li>
</ul>
</div>

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