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)
Related
{
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
}
<nav class="side-navbar">
<div class="title">
<h1>Top 10</h1>
</div>
<ul class="list-group">
<a class="item d-flex align-items-center">
<i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
<div class="item d-table-cell">
<i id='topbranch'></i>
<i id='topjob'></i>
<i id='topculprit'></i>
</div>
<i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
</a>
</ul>
</nav>
I want to insert my json data into html elemnts
for example top10[0].branch should go into html id topbranch.
and it should loop. please see the image how it should come.
please show me how to do it in javascript.it would be nice if you give jsfiddle link
You need to change all id to class for topbranch, topjob and topculprit as you will be creating multiple elements through loop. The id should be unique for any element in HTML document.
Hope the below sample works for you. You can find comments in JS code. You need to write your own CSS to display the items as per your screen shot. I have added li element under ul element.
var data = {
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
};
$.each(data.top10, function (i, el) {
var ele = $(".list-group a.item:first").parent().clone(); //Clone the first element
ele.find(".topbranch").text(el.branch).css("color", el.state); //Update values
ele.find(".topjob").text(el.job);
ele.find(".topculprit").text(el.culprit);
$(".list-group").append(ele); //Append cloned element to `list-group`
})
$(".list-group a.item:first").parent().remove(); //Remove first li
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="side-navbar">
<div class="title">
<h1>Top 10</h1>
</div>
<ul class="list-group" style="list-style-type: none;">
<li>
<a class="item d-flex align-items-center" style="display: flex; justify-content: space-evenly;">
<i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
<div class="item d-table-cell">
<i class='topbranch'></i><br/>
<i class='topjob'></i><br/>
<i class='topculprit'></i><br/>
</div>
<i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
</a>
</li>
</ul>
</nav>
If you have json array you need to just loop through all objects and read their properties.
Please try this.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
}
for (i in myObj.top10) {
x += "<h2>" + myObj.top10[i].branch + "</h2>";
x += "<h2>" + myObj.top10[i].job + "</h2>";
x += "<h2>" + myObj.top10[i].culprit + "</h2>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Try using a modern javascript framework with data binding feature, it's easy to implement and elegant, you can choose from vue, Angular or React.
You can try some thing like this iterate over your data.
var html;
$.each(data.top10,function(key1,value1){
html="<div><i id='topbranch'>"+value1.state+"</i><br>"
+"<i id='topjob'>"+value1.job+"</i><br>"
+" <i id='topculprit'>"+value1.culprit+"</i></div><br>"
$("#divId").append(html)
})
here is the fiddle : https://jsfiddle.net/6w11Ln05/3/
you can add your design accordingly.
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
I have a shopping cart from shopify. The object looks like this:
{
"attrs": {
"line_items": [
{
"image": {
"id": 19361216518,
"created_at": "2016-10-03T11:50:25-05:00",
"position": 1,
"updated_at": "2017-02-03T17:11:13-06:00",
"product_id": 8659646086,
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box.jpg?v=1486163473",
"variant_ids": [
]
},
"image_variants": [
{
"name": "pico",
"dimension": "16x16",
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box_pico.jpg?v=1486163473"
}
],
"variant_id": 30287712070,
"product_id": 8659646086,
"title": "Dome Water Main Shut Off Valve",
"quantity": 1,
"properties": {
},
"variant_title": "Default Title",
"price": "99.99",
"compare_at_price": null,
"grams": 0,
"shopify-buy-uuid": "shopify-buy.1494514993286.2"
}
],
"shopify-buy-uuid": "shopify-buy.1494514993286.1"
}
And a function that looks like this:
var updateCart = function() {
var cart = localStorage.getItem(domeCart).toJSON();
if (cart.lineItemCount != 0) {
var shoppingCart = document.getElementById('shopping-cart');
rivets.bind(shoppingCart,{cart:cart});
}
}
And a cart that looks like this:
<div id="shopping-cart">
<h3 class="empty-cart">Empty!</h3>
<div class="top-cart-items items">
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" />
</div>
<div class="top-cart-item-desc">
Light Blue Denim Dress
<span class="top-cart-item-price">$24.99</span>
<span class="top-cart-item-quantity">x 3</span>
</div>
</div>
</div>
<div class="top-cart-action clearfix">
<span class="fleft top-checkout-price">$114.95</span>
View Cart
</div>
</div>
I'm having trouble figuring out how I can use rivets to check if the object is empty or not and if it is empty put <h2>Shopping cart empty</h2> but if it isn't empty loop through all of the cart items and place the data in its respectable part of the markup.
I've looked through Rivets.js documentation and it the product doesn't seem well documented. Any help would be very much appreciated.
What I'm trying to achieve here is getting filter results from a json file using two dropdown. Actually I have two requirements.
Get filtered results on a click of a search button.
update the same scope and not creating a new scope for search results.(I have created a new scope in my code)
I'll explain a bit more here I have two select options one is for subjects and other is for grades. I want the results based on the selected options. Eg: If I select Math I should get 2 results as per the json. Also I'm not able to understand how do I achieve the update the view.
Here is code
JSON:
{
"data": [
{
"id": 1,
"image": "images/img01.jpg",
"title": "Addition and subtraction",
"subject": "Math",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 2,
"date": "21 Dec 2015"
},
{
"id": 2,
"image": "images/img02.jpg",
"title": "Addition",
"subject": "Math",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 0,
"noOfQuestions": 1,
"date": "09 April 2015"
},
{
"id": 3,
"image": "images/img03.jpg",
"title": "Learn English",
"subject": "English",
"grade": 1,
"noOfVideos": 0,
"noOfDocuments": 1,
"noOfQuestions": 1,
"date": "28 Oct 2015"
},
{
"id": 4,
"image": "images/img04.jpg",
"title": "Lorem Ipsum",
"subject": "Science",
"grade": 1,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 2,
"date": "11 Jan 2016"
},
{
"id": 5,
"image": "images/img05.jpg",
"title": "Computers magic",
"subject": "Computers",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 1,
"date": "01 June 2015"
}
]
}
HTML
<form ng-submit="search()">
<select class="form-control" ng-model="subject" ng-options="subj.subject for subj in listData">
<option value="">All Subjects</option>
</select>
<select class="form-control" ng-model="grade" ng-options="grd.grade for grd in listData track by grd.id">
<option value="">All Grades</option>
</select>
<!-- <input type="submit"> -->
<input type="submit" value="search">
</form>
<!-- <div class="item" id="item{{ item }}" ng-repeat="item in listData" draggable item="item">{{ item }}</div> -->
<div class="panel panel-default" ng-repeat="data in searchResults">
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<img ng-show="data.image" src="{{data.image}}" width="120" height="120" />
</div>
<div class="col-lg-10 data-content">
<h1 id="item{{ item }}" class="item" draggable item="item">{{ data.title }}</h1>
<p>{{ data.subject }} Grade: {{ data.grade }}</p>
<div class="meta-data">
<div class="data-details">
{{ data.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i>
{{ data.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
{{ data.noOfVideos }} Q
</div>
<div class="date">{{ data.date }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default" ng-hide="searchResults" ng-repeat="list in listData">
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<img ng-show="list.image" src="{{list.image}}" width="120" height="120" />
</div>
<div class="col-lg-10 data-content">
<h1 id="item{{ item }}" class="item" draggable item="item">{{ list.title }}</h1>
<p>{{ list.subject }} Grade: {{ list.grade }}</p>
<div class="meta-data">
<div class="data-details">
{{ list.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i>
{{ list.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
{{ list.noOfVideos }} Q
</div>
<div class="date">{{ list.date }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="error" ng-show="error">{{ error }}</div>
JS
var app = angular.module('zayaApp', []);
app.factory('mainInfo', function($http) {
return $http.get('data.json');
})
app.controller('listCtrl', ['$scope', '$http', 'mainInfo', function($scope, $http, mainInfo){
mainInfo.then(function successCallback(response) {
$scope.listData = response.data.data;
}, function errorCallback(response) {
$scope.error = response.statusText;
});
$scope.search = function() {
var searchResults = {
subject: $scope.subject,
grade: $scope.grade
}
$scope.searchResults = searchResults;
}
}]);
Also if you see the json the grades are repeated so, I wanted to know when populating the select options can I just prevent it from repeating? Only 1 & 2 shows up? I'm able to achieve the results with one dropdown select option but not able to chain it. I would have created a plunkr but it doesn't seems to work with the json file.
Demo Link
In Angularjs Two way Binding so no need button click. After select dropdown the data will show based on filter...
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>