ng repeat with <li> within a <td>

ng repeat with <li> within a <td> - javascript

I am trying to put a list li inside a row of a table using ng repeat.
My code below of what I am trying to achieve:
<td>
<div ng-repeat="x in total.count">
<ul>
<li>
{{x.key}}
</li>
</ul>
</div>
</td>
A sample of total:
"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}
The issue is that nothing is appearing. But when I hard code the li, it works.
Can somebody advise me on how to do it in angularjs using ng-repeat ?

Try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.object = {"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}]
}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border=1>
<tr>
<td>
<ul>
<li ng-repeat="x in object.total.count">
{{x.key}}
</li>
</ul>
</td>
</tr>
</table>
</div>

Try and use the ng-repeat on the li element, the ng-repeat makes a "copy" of the element its placed in. So this will repeat the list item element.
<td>
<ul>
<li ng-repeat="x in total.count">
{{x.key}}
</li>
</ul>
</td>

You are repeating a list with one element, not the element itself

Related

Angularjs nested ng-repeat linking back to object

I have an object like so:
$scope.group = {
"Jim Jenkins": {
"Blue": {
"Circle": [
"Item1",
"Item2",
"Item3"
]
}
},
"Rachel Smith": {
"Blue": {
"Circle": [
"Item 1"
]
},
"Red": {
"Circle": [
"Item 1",
"Item 2"
]
}
}
}
I created a nested ng-repeat function that cycles through the object and displays it.
<script type="text/ng-template" id="group.html">
<ul style="padding:10px;">
<li type="none" ng-repeat="(i, c) in group">
<div ng-click="test(i)" style="background-color:#fff;padding:5px;" ng-if="i.length > 0">{{ i }}</div>
<div ng-click="test(c)" style="background-color:#fff;padding:5px;margin-bottom:5px;" ng-if="!i.length">{{ c }}</div>
<div ng-switch on="i.length > 0">
<div ng-switch-when="true">
<div ng-init="group = c;" ng-include="'group.html'"></div>
</div>
</div>
</li>
</ul>
</script>
<div ng-include="'group.html'" ng-model="group"></div>
My only issue is, now I have now way of linking back to the original $scope.group object. I have a ng-click where I display the items and I'd like to be able to know where this element is located (so I know what the parent is, know how many levels in, add more items, etc).
Does anyone know how I can achieve this?

Try like this
var app = angular.module("app", []);
app.controller('mainCtrl', function($scope) {
$scope.isArray = angular.isArray;
$scope.group = [{
"Jim Jenkins": {
"Blue": {
"Circle": [
"Item1",
"Item2",
"Item3"
]
}
},
"Rachel Smith": {
"Blue": {
"Circle": [
"Item 1"
]
},
"Red": {
"Circle": [
"Item 1",
"Item 2"
]
}
}
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div ng-app="app" ng-controller="mainCtrl">
<script type="text/ng-template" id="dummy.html">
<ul>
<li ng-repeat="(k,v) in group">
<div ng-include=" 'nested.html' " onload="group = v"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="nested.html">
<div ng-repeat="(k1,v1) in v">{{k1}}
<ul>
<li ng-if="isArray(v1)" ng-repeat="val in v1">
{{val}}
</li>
</ul>
<li ng-if="!isArray(v1)" >
<div ng-include=" 'dummy.html' " onload="group = v1"></div>
</li>
</div>
</script>
<div ng-include=" 'dummy.html'"></div>
</div>

shorten ng-repeat variable with limitTo

In my DB I have Datastructure like this
"Projects":[{
"Year2016":[{"Name": "Project1"},{"Name": "Project2"}],
"Year2017":[{"Name": "Project1"},{"Name": "Project2"}]
}]
with ng-repeat i go
ng-repeat="year in Projects"
<b>{{year | limitTo:4:6}}</b>
instead of 2016 i get the whole {"Year2016":.....}
if i put the query response in the code as a string it works as suspected but
for some reason the limitTo is not working on the new ng-repeat "variable"
Is it possible at all?

you should use a (key, value) syntax ng-repeat to loop through json object array with the keys.
refer the below example:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = {
"Projects": [{
"Year2016": [{
"Name": "Project1"
}, {
"Name": "Project2"
}],
"Year2017": [{
"Name": "Project1"
}, {
"Name": "Project2"
}]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="project in data.Projects">
<div ng-repeat="(key, value) in project">
<b>{{key | limitTo:4:4}}</b>
<div ng-repeat="item in value">
<span>{{item.Name}}</span>
</div>
</div>
</div>
</div>

last field id for starting index so your ng repeat should be
ng-repeat="year in Projects"
<b>{{year | limitTo:4:4}}</b>

AngularJS ng-repeat Post Value not getting in proper pattern using id as key

I'm new in AngularJS I want to get post value in proper format. When I use
field name as key in checkbox it gives proper value but when I use id as key it does't.
Given below code with name as key
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.mainMenu = {};
$scope.submenu = {};
$scope.pagemenu ={};
$scope.menu = {};
$scope.menus = [
{"menuID":"11","sub_menu":"N","name":"dashboard","sub_menus":""},
{"menuID":"1","sub_menu":"Y","name":"settings","sub_menus":[{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
{"menuID":"2","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"3","name":"help1","page":"N","pages":""},{"sub_menuID":"4","name":"help2","page":"N","pages":""}]},
{"menuID":"3","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"5","name":"contact1","page":"N","pages":""},{"sub_menuID":"6","name":"contact2","page":"N","pages":""}]}
];
$scope.assignValue = function(menuId,submenuId,pageId){
/* if(!$scope.mainMenu[menuId]&&!$scope.submenu[menuId]&&!$scope.pagemenu[menuId]){
delete($scope.mainMenu[menuId]);
delete($scope.submenu[menuId]);
delete($scope.pagemenu[menuId]);
} */
$scope.menu=Object.assign({},$scope.mainMenu, $scope.submenu,$scope.pagemenu);
console.log($scope.menu);
}
$scope.submit = function(){
// alert(JSON.stringify($scope.menu));
console.log(JSON.stringify($scope.menu));
console.log($scope.menu);
}
});
<!DOCTYPE html>
<html>
<head>
<title>rules</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl">
<form ng-submit="submit()">
<ul>
<li ng-repeat="x in menus">
<input type="checkbox" ng-change= "assignValue(x.menuID)" ng-model="mainMenu[x.name]" ng-true-value="'{{x.menuID}}'">{{x.name}}
<ul ng-if="[x.sub_menu] == 'Y'">
<li ng-repeat="subMenu in x.sub_menus">
<input type="checkbox" ng-model="submenu[x.name][subMenu.name]" ng-true-value="'{{subMenu.sub_menuID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,null)">{{subMenu.name}}
<ul ng-if="[subMenu.page] == 'Y'">
<li ng-repeat="page in subMenu.pages">
<input type="checkbox" ng-model="pagemenu[x.name][subMenu.name][page.name]" ng-true-value="'{{page.pageID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,page.pageID)">{{page.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
<button>Submit</button>
</form>
</div>
</body>
</html>
And the code with id as key
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.mainMenu = {};
$scope.submenu = {};
$scope.pagemenu ={};
$scope.menu = {};
$scope.menus = [
{"menuID":"11","sub_menu":"N","name":"dashboard","sub_menus":""},
{"menuID":"1","sub_menu":"Y","name":"settings","sub_menus":[{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
{"menuID":"2","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"3","name":"help1","page":"N","pages":""},{"sub_menuID":"4","name":"help2","page":"N","pages":""}]},
{"menuID":"3","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"5","name":"contact1","page":"N","pages":""},{"sub_menuID":"6","name":"contact2","page":"N","pages":""}]}
];
$scope.assignValue = function(menuId,submenuId,pageId){
/* if(!$scope.mainMenu[menuId]&&!$scope.submenu[menuId]&&!$scope.pagemenu[menuId]){
delete($scope.mainMenu[menuId]);
delete($scope.submenu[menuId]);
delete($scope.pagemenu[menuId]);
}*/
$scope.menu=Object.assign({},$scope.mainMenu, $scope.submenu,$scope.pagemenu);
console.log($scope.menu);
}
$scope.submit = function(){
// alert(JSON.stringify($scope.menu));
console.log(JSON.stringify($scope.menu));
console.log($scope.menu);
}
});
<!DOCTYPE html>
<html>
<head>
<title>rules</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl">
<form ng-submit="submit()">
<ul>
<li ng-repeat="x in menus">
<input type="checkbox" ng-change= "assignValue(x.menuID)" ng-model="mainMenu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
<ul ng-if="[x.sub_menu] == 'Y'">
<li ng-repeat="subMenu in x.sub_menus">
<input type="checkbox" ng-model="submenu[x.menuID][subMenu.sub_menuID]" ng-true-value="'{{subMenu.sub_menuID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,null)">{{subMenu.name}}
<ul ng-if="[subMenu.page] == 'Y'">
<li ng-repeat="page in subMenu.pages">
<input type="checkbox" ng-model="pagemenu[x.menuID][subMenu.sub_menuID][page.pageID]" ng-true-value="'{{page.pageID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,page.pageID)">{{page.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
<button>Submit</button>
</form>
</div>
</body>
</html>

I executed your code and compared the results. The only difference that I figured out was of the order you wants the key to be in.
In json, there is no meaning of ordering keys. Moreover your keys are numbers so they are arranged in an ascending order.
It's the way v8 handles associative arrays. A known issue Issue 164 but it follows the spec so is marked 'working as intended'. There isn't a required order for looping through associative arrays.
A simple workaround is to precede number values with letters e.g: 'size_7':['9149','9139'] etc.
The standard will change in the next ECMAScript spec forcing [chrome] developers to change this.
So nothing to worry about the order. You can access it with the keys as that is how json is to be used.
If you need order then you need some dirty hacky ways to do it which will either force you to rename your keys to something else or to create sub-objects of json.
For your case, the hacky way is to add _ before all your menuIds except 11
This will make you menus array look like below
$scope.menus = [
{"menuID":"11","sub_menu":"N","name":"dashboard","sub_menus":""},
{"menuID":"_1","sub_menu":"Y","name":"settings","sub_menus":[{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
{"menuID":"_2","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"3","name":"help1","page":"N","pages":""},{"sub_menuID":"4","name":"help2","page":"N","pages":""}]},
{"menuID":"_3","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"5","name":"contact1","page":"N","pages":""},{"sub_menuID":"6","name":"contact2","page":"N","pages":""}]}
];
and this will provide you with the desired output of 11 to be the first element and _1,_2 and _3 following it.
Here is the code snippet.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.mainMenu = {};
$scope.submenu = {};
$scope.pagemenu = {};
$scope.menu = {};
$scope.menus = [{
"menuID": "11",
"sub_menu": "N",
"name": "dashboard",
"sub_menus": ""
},
{
"menuID": "_1",
"sub_menu": "Y",
"name": "settings",
"sub_menus": [{
"sub_menuID": "1",
"name": "settings1",
"page": "Y",
"pages": [{
"pageID": "1",
"name": "page1"
}, {
"pageID": "2",
"name": "page2"
}]
}, {
"sub_menuID": "2",
"name": "settings2",
"page": "N",
"pages": ""
}]
},
{
"menuID": "_2",
"sub_menu": "Y",
"name": "help",
"sub_menus": [{
"sub_menuID": "3",
"name": "help1",
"page": "N",
"pages": ""
}, {
"sub_menuID": "4",
"name": "help2",
"page": "N",
"pages": ""
}]
},
{
"menuID": "_3",
"sub_menu": "Y",
"name": "contact",
"sub_menus": [{
"sub_menuID": "5",
"name": "contact1",
"page": "N",
"pages": ""
}, {
"sub_menuID": "6",
"name": "contact2",
"page": "N",
"pages": ""
}]
}
];
$scope.assignValue = function(menuId, submenuId, pageId) {
$scope.menu = Object.assign({}, $scope.mainMenu, $scope.submenu, $scope.pagemenu);
console.log($scope.menu);
}
$scope.submit = function() {
console.log(JSON.stringify($scope.menu));
console.log($scope.menu);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="MainCtrl">
<form ng-submit="submit()">
<ul>
<li ng-repeat="x in menus">
<input type="checkbox" ng-change="assignValue(x.menuID)" ng-model="mainMenu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
<ul ng-if="[x.sub_menu] == 'Y'">
<li ng-repeat="subMenu in x.sub_menus">
<input type="checkbox" ng-model="submenu[x.menuID][subMenu.sub_menuID]" ng-true-value="'{{subMenu.sub_menuID}}'" ng-change="assignValue(x.menuID,subMenu.sub_menuID,null)">{{subMenu.name}}
<ul ng-if="[subMenu.page] == 'Y'">
<li ng-repeat="page in subMenu.pages">
<input type="checkbox" ng-model="pagemenu[x.menuID][subMenu.sub_menuID][page.pageID]" ng-true-value="'{{page.pageID}}'" ng-change="assignValue(x.menuID,subMenu.sub_menuID,page.pageID)">{{page.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
<button>Submit</button>
</form>
</div>
</body>

using ng-repeat inside another ng-repeat

I'm developing a page where I need to show some boxes (using ng-repeat) that contains info of channels and where it will be shown (which are cities).
The problem I am facing is when I repeat the second ng-repeat:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[$index].nit]">
This should get the $index of first ng-repeat and create a new array with the places the channels will be shown. And it does exactly that. But, when I apply the second ng-repeat using this array, it doesn't work properly.
Said that my html looks like this (PS: I need to use the index value instead of objCh.name because I place these boxes into columns)
<div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0 && indexO<=10">
<div class="box-header">
<div class="pull-left">
<img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal">
<h3 class="box-title">{{ objsCh[(indexO)].name }}</h3>
</div>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="box-body">
<table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Nit</th>
</tr>
<tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN">
<td>{{ objsCh[(indexO + 1)].nit[indexN].num }}</td>
<td>{{ objsCh[(indexO + 1)].nit[indexN].name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
The JS file looks like this:
var app = angular.module('appApp', []);
app.controller('ctrlApp', function($scope, $http) {
var url = "includes/exibChNit.php";
$http.get(url).success(function(response) {
all = response;
$scope.objsCh = all.channels;
});
});
And the json file (that php create) looks like this:
{
"channels": [{
"id": "1",
"sid": "1",
"name": "Channel",
"pic": "channel.jpg",
"crc32": "A1g423423B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}, {
"id": "2",
"sid": "2",
"name": "CHannel 1",
"pic": "channel.jpg",
"crc32": "A1F5534234B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}]
}
When I try this it works:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]">
But I can't make it this way because the json nodes will be dynamic.
Thanks in advance!

ng-repeat's create their own $scope.
So, for the inner ng-repeats, you have access to $parent.$index, where $parent is the parent scope of the current repeat block.
For ex:
<ul ng-repeat="section in sections">
<li>
{{section.name}}
</li>
<ul>
<li ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
Plunkr http://plnkr.co/edit/hOfAldNevxKzZQlxFfBn?p=preview
(simplified from this answer passing 2 $index values within nested ng-repeat)

How to frame a angularjs html format with the multi child object values

My Data (array of objects):
$scope.names = [{ "name": "John", "imgsrc": "Smith", "navPath": true, "subValues": [{ "subName": "home" }, {"subName": "home"}]},
{ "name": "Hege", "imgsrc": "Hege1", "navPath": true, "subValues": [{ "subName": "Hege11" }]},
{ "name": "Kai", "imgsrc": "Kai1", "navPath": true, "subValues": [{ "subName": "Kai11" },{"subName": "Kai12"},{"subName": "Kai13"}]}];
My Expected OUTPUT HTML:
<div>
<a src="Smith.html">John</a>
<div>
<span>home</span>
<span>home</span>
</div>
</div>
<div>
<a src="Hege1.html">Hege</a>
<div>
<span>Hege11</span>
</div>
</div>
<div>
<a src="Kai1.html">Kai</a>
<div>
<span>Kai11</span>
<span>Kai12</span>
<span>Kai13</span>
</div>
</div>.
What is the exact coding format in AngularJS to get this OUTPUT?. I am New to AngularJS, so those who try to explain please provide me to clear understanding. Thanks in advance.

You can use ngRepeat to show each element of a list in AngularJS. The object you get for each item in the list is a normal JavaScript object, so you can get fields and call methods on them. You can even use an ngRepeat instead another ngRepeat.

I Got the solution from this stackoverflow.
Using ng-repeat on JSON containing JSON
Json data:
{
"modules":
[
{
"title":"name of module1",
"description":"description of module1",
"weeks":[{"id":1, "title":"Week 01"}]
},
{
"title":"name of module2",
"description":"description of module2",
"weeks":[{"id":2, "title":"Week 02"},{"id":3,"title":"Week 03"}]
}
]
}
And then your markup would be:
<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
<td>
<h3 class="moduletitle">{{ module.title }}</h3>
<h4>Description</h4>
<p>{{ module.description }}</p>
</td>
</tr>
<tr ng-repeat="week in module.weeks">
<td>
{{ week.title }}
</td>
</tr>
</table>

We Keep Coding

JavaScript is the programming language of the Web.

ng repeat with <li> within a <td> - javascript

Try and use the ng-repeat on the li element, the ng-repeat makes a "copy" of the element its placed in. So this will repeat the list item element. <td> <ul> <li ng-repeat="x in total.count"> {{x.key}} </li> </ul> </td>

You are repeating a list with one element, not the element itself

Related

Angularjs nested ng-repeat linking back to object

shorten ng-repeat variable with limitTo

AngularJS ng-repeat Post Value not getting in proper pattern using id as key

using ng-repeat inside another ng-repeat

How to frame a angularjs html format with the multi child object values

Categories

Resources