I have to generate numbers in sequence(continuous numbers) for both ng-repeat and for which i am using $index but that is again giving me sequence from 1 for second ng-repeat.
I tried taking a variable in scope and then incrementing in the view but that is also not working out.
Example plunker
Code:
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li><span>{{$index + 1}}</span><span> {{detail.name}}</span>
</li>
</ul>
<ul ng-repeat="detailed in details.name">
<li><span>{{$index + 1}}</span><span>{{detailed.prof}}</span></li>
</ul>
</body>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name = [
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
});
here in this plunker engineer number should be 3 and doctor number should be 4.
Any help would be appreciated.
Add details.length to the second ng-repeat
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li><span>{{$index + 1}}</span><span> {{detail.name}}</span>
</li>
</ul>
<ul ng-repeat="detailed in details.name">
<li><span>{{details.length + $index + 1}}</span><span>{{detailed.prof}}</span></li>
</ul>
Related
Get an object from server. look like this:
"courses": [
{
"id": 1,
"name": "piano",
"classes": [
{
"id": 1,
"name": "piano1",
},
{
"id": 2,
"name": "piano2",
}
],
"classes_count": 2,
"feedbacks_count": 4
},
]
JS: there I get data to Scope
httpService.getService(url, data).then(function(res) {
$scope.datas = res.body.courses;
console.log($scope.datas);
})
I need to print classes id in ng-repeat. try to do this
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas | filter:{'id': showprofile}:true ">{{course.classes.id}}</li>
</ul>
But it's work when I print {{course.classes}} and I get an array with 2 objects. How to show in "li" element course.classes.id ?
You have array in array, so you have got 2 ng-repeats: first iterating over courses and second over classes.
<ul ng-repeat="course in datas" class="dropdown-list" style="display: none;">
<li ng-repeat="class in course.classes">{{class.id}}</li>
</ul>
You need to add another loop for nested elements
<ul class="dropdown-list" style="display: none;">
<li ng-repeat="course in datas" ng-if='$first'> {{course.id}}</li>//
<ul ng-if="course.classes.length">
<li ng-repeat="classes in course"> {{course.classes.id}}</li>
</ul>
</ul>
This is my first time posting a question on stackoverflow so sorry if its not in the correct format.
I keep running into the same problem in angular and i'm sure there is a very simple way to solve it but for some reason i can't figure it out. I will post an example and give an explanation below.
<div class="jmc-navbar-content" ng-if="!vm.isHidden" ng-swipe-up="vm.toggleNav()">
<!-- contains the navigation/page links -->
<ul class="jmc-navbar-menu">
<li class="active"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#home">Home</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#portfolio">Portfolio</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#about">About</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#contact">Contact</a></li>
<li><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="#/">View source on GitHub</a></li>
</ul>
</div>
Although this works i don't like having to repeat myself for all the <a> tags which need to have the same classes and attributes. I can think of multiple ways in which to do this with javascript but they all seem a little 'hack-y'. Is there any simple way to do this in Angular or Javascript?
Thanks for taking the time to reply, any and all constructive criticism is appreciated.
First you could create an array of objects with the paths and the placeholder(display):
Then you can use ngRepeat directive:
<li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>
See it working:
(function() {
'use strict';
angular
.module("app", [])
.controller('MainCtrl', MainCtrl);
function MainCtrl() {
var vm = this;
vm.links = [
{
"path": "#home", "display": "Home"
},
{
"path": "#portfolio", "display": "Portfolio"
},
{
"path": "#contact", "display": "Contact"
},
{
"path": "#about", "display": "About"
},
{
"path": "#/", "display": "View source on GitHub"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<li ng-class="{ 'active': $first }" ng-repeat="link in vm.links"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="{{link.path}}">{{link.display}}</a></li>
</body>
</html>
I hope it helps.
In your html use ng-repeat
And as your first li has the class as 'active', you need to use $index
<div ng-repeat = 'aVal in aVals'>
<li ng:class="{true:'active', false:''}[$index == 0]"><a class="noPreventDefault" ng-click="vm.toggleNav()" ng-href="aVal.hrefVal">{{aVal.name}}</a></li>
</div>
And in angularController
var app = angular.module("myApp", []);
angular
.module('myApp')
.controller('myCtrl', ['$scope',
function ($scope) {
$scope.aVals= [
{ hrefVal: '#home', name='Home'},
{ hrefVal: '#portfolio', name='Protfolio'},
// so on
];
}]);
yes ,you can use ng-repeat.I think it satisfy your problem. and If then href's are states then angular provide ui-sref. This way you can implement.
Can you check this attachement .
"http://jsfiddle.net/soumyagangamwar/789Ks/77/"
If it satisfy you requirement then don't forget to vote.
I am trying to iterate over an array using ng-repeat to display in a list. The number of records to display should be equal to the length of a second array.
<ul>
<li ng-repeat="item in firstArray"></li>
</ul>
var firstArray = ["a","b","c","d","e","f"]
var secondArray = ["x","y","z"]
The expected result for the above example :
var output = ["a","b","c"]
Since the length of secondArray is 3, the number of li elements would be 3 with the first three values from firstArray.
Should i use filter? I am using angularjs.
Thanks
The simplest solution is to use limitTo
<ul>
<li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>
http://plnkr.co/edit/LWh1uqNPxTy09u3MP677?p=preview
<ul>
<li ng-repeat="item in firstArray" ng-if=" $index < secondArray.length "></li>
</ul>
Use the above code, it will work
You can use AngularJs filter limitTo in ng-repeat. Refer to the below example:
At angular application side:
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.firstArray = ["a","b","c","d","e","f"]
$scope.secondArray = ["x","y","z"]
});
In your view:
<ul>
<li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>
Maybe you should use $index to test if it has to be displayed :
<ul >
<li ng-repeat="item in firstArray" ng-if="$index < secondArray.length()" > </li>
</ul>
Just loop over your second array and access the items of the first array using firstArray[$index].
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.firstArray = ["a","b","c","d","e","f"];
$scope.secondArray = ["x","y","z"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="i in secondArray">
{{firstArray[$index]}}
</li>
</ul>
</div>
</div>
I have a set of JSON data that I would like to display in a nested list:
The JSON comes in the following format:
["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]]
The html should be:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ul>
I don't have control of the JSON, and it may be deeper than 2 levels.
Of course, I tried this:
<ul>
<li ng-repeat="item in data">{{item}}</li>
</ul>
but it doesn't work because for nested items, it simply displays the json.
How can I achieve nested lists in AngularJs?
Fiddle: http://jsfiddle.net/m7ax7tsa/
Have a look at this nice blog post that has a complete example at the end. In short you need to build nested directives, where inner directive will have recursive call to outer directive:
<body>
<div ng-controller="IndexCtrl">
<collection collection='tasks'></collection>
</div>
</body>
angular.module('APP', [])
.directive('collection', function () {
return {
...
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
.directive('member', function ($compile) {
return {
...
template: "<li>{{member.name}}</li>",
link: function (scope, element, attrs) {
if (angular.isArray(scope.member.children)) {
element.append("<collection collection='member.children'></collection>");
$compile(element.contents())(scope)
}
}
}
I found a solution thanks to zsong and Blackhole.
Resulting HTML:
<div ng-app="testApp">
<div ng-controller="TestCtrl">
<script type="text/ng-template" id="/nestedList.html">
<ul>
<li ng-repeat="item in data">
<div ng-switch="isString( item )">
<div ng-switch-when="true">{{item}}</div>
<div ng-switch-when="false">
<!-- Recursive template!! -->
<div ng-include="'/nestedList.html'" ng-init="data = item">
</div>
</div>
</div>
</li>
</ul>
</script>
<div ng-include="'/nestedList.html'"></div>
</div>
</div>
I used a recursive template which included itself. It borrows heavily on the answer of Unknown number of sublists with AngularJS. In addition, I had to add the following code to the controller:
$scope.isString = function (item) {
return typeof item === "string";
};
I am creating a new ul>li>ul>li list and I want to repeat the data according to the list items.
My code is like this:
My Angular code is:
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function ($scope) {
$scope.items = [
{
title:"book" [
{subtitle:"name", description:"____Book_______"}
],
description: "Some Book is very Good."
},
{
title:"book_2" [
{subtitle:"name", description:"____Book_2______"}
],
description: "2Some Book is very Good."
}
];
});
My HTML code is:
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat="item in items">
<div>{{item.title}}</div>
<div>{{item.description}}</div>
<ul>
<li>
<div>{{subtitle.title}}</div>
<div>{{item.description}}</div>
</li>
</ul>
</li>
</ul>
</body>
My Plunker
Your JSON is improper, It needs to be in this format:
JSON:
$scope.items = [
{
"title":"book" ,"subtitle":[
{"subtitle":"name", "description":"____Book_______"}
],
"description": "Some Book is very Good."
},
{
"title":"book_2" , "subtitle":[
{"subtitle":"name", "description":"____Book_2______"}
],
"description": "2Some Book is very Good."
}
];
And then in your html markup you need to reference it like this (nested ng-repeat):
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle}} </div>
<div>{{subtitle.description}}</div>
</li>
</ul>
</li>
</ul>
Working Plunkr