the data is showing in the log but its now showing in my page.i wanted to load the data . what is the problem?
function AppController($scope, TestFactory) {
/* console.log("AppController is now available.");*/
$scope.testdata= [];
TestFactory.getData().then(function(response) {
$scope.testdata = response.data;
console.log("Data:", $scope.testdata);
})
}
<ion-slide-page ng-repeat="event in testdata">
<div class="now-viewport">
<div class="event-image">
</div>
<div class="event-placeholder">
<div class="event-title">{{ event.message}}</div>
<div class="event-details">
</div>
</div>
</div>
</ion-slide-page>
try the following code below
<ion-slide-page ng-repeat="event in testdata.message">
<div class="now-viewport">
<div class="event-image">
<div class="event-placeholder">
<div class="event-title">{{event}}</div>
<div class="event-details"></div>
</div>
</div>
</div>
</ion-slide-page>
Your response is an object where message is an array of strings, try as follows,
<ion-slide-page ng-repeat="event in testdata.message">
<div class="now-viewport">
<div class="event-image">
<div class="event-placeholder">
<div class="event-title">{{event}}</div>
<div class="event-details"></div>
</div>
</div>
</div>
</ion-slide-page>
Related
I have a website with a bootstrap carousel, showing 4 photos in every slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
</div>
I want to get the photos from database using angularjs. ng-repeat on item will fix the problem, but it will get 50 photos.
How can i put every 4 photos/50 in every slide. Any help?
You can use groupBy filter, also you should add helper property: index: Math.floor(i / 4) to your images.
angular.module('app', ['angular.filter'])
.controller('MyController', ['$scope', function($scope) {
$scope.images = [];
for(var i = 0; i < 50; i++)
$scope.images.push({url:'url' + i, index: Math.floor(i / 4)});
}]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<body ng-app="app">
<div ng-controller="MyController">
<div class="carousel-inner">
<div class="item" ng-class='{active: $first}' ng-repeat="(key, value) in images | groupBy: 'index'">
<div class="row">
<div class="col-sm-3" ng-repeat="image in value">
{{image.url}}
</div>
</div>
<br/>
</div>
</div>
</div>
</body>
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
How can i use counter for ng-repeat values?? . I have used a 2 functions add and minus quantity and called those function in controller. The problem is when i click add or minus the counter does increase or decrease for all the ng-repeat datas . i want to increase or decrease quantity for each and every product..can anyone post a sample code or for the screenshot below ??
Screenshot
controller.js
.controller('grocery', function($scope, $http) {
$http.get('/groceryjson.json')
.success(function(response) {
$scope.mydata = response;
$scope.booking = [];
$scope.toggle = function(image) {
$scope.selectedImage = image.product_name;
$scope.selected_can_rate = image.can_rate;
$scope.product_name = image.product_name;
/* $scope.register.product_name = image.product_name;*/
$scope.can_path = image.can_path;
/*$scope.register.can_path = image.can_path;*/
$scope.booking.push(image)
console.log($scope.booking);
};
})
$scope.myEvent = function() {
window.location = "#/app/booking";
}
$scope.canqty = 0;
$scope.addqty = function(no){
$scope.canqty++
}
$scope.subqty = function(no){
if($scope.canqty >=1){
$scope.canqty--
}
};
})
grocery.html
<ion-view view-title="Grocery">
<ion-floating-button ng-click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff">
</ion-floating-button>
<ion-content>
<div class="row" ng-click="toggle(image)" ng-repeat="image in mydata">
<div class="col col-30 grocery-img">
<img src="{{image.can_path}}" alt="{{image.product_name}}">
</div>
<div class="col col-30">
<div class="grcoery-header">
{{image.product_name}}
</div>
<!-- <div class="grocery-desc">
{{data.desc}}
</div> -->
</div>
<div class="col col-40">
<div class="grocery-buy">
<a class="button buy">Add</a>
</div>
</div>
</div>
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(no)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(no)"></button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
The problem here is that you try to change a variable that is attached to your $scope principal, no contain in your object.
So something like that should work :
View:
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(data)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{data.canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(data)"></button>
</div>
</div>
</div>
</div>
Controller :
$scope.addqty = function(data){
data.canqty++
}
$scope.subqty = function(data){
if($scope.canqty >=1){
data.canqty--
}
Can any body tell me how to display dygraph in listview using json response.
Here is my response from which i need to make dygraph..i goggled about it but its did'nt get any clue about it.
http://piratepad.net/ep/pad/view/ro.y8PksMhLIhk/latest
this is how i am doing :-
In My Index.html :-
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/dygraph-combined-dev.js"></script>
<script src="js/dygraph-combined.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
In My Home.html :-
<div ng-repeat="entry in listnew">
<div class="bar bar-dark bar-head">
<h2>Basestation {{entry.baseID}} {{entry.nickname}}</h2>
</div>
<ion-list>
<div ng-repeat="scout in entry.scouts">
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout)"
ng-class="{active: isGroupShown(scout)}" ng-init="showGraph(scout.tempHistory)">
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div id=graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
</div>
In my controller.js :-
$scope.showGraph = function(data) {
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
data, {
// options go here. See http://dygraphs.com/options.html
legend : 'always',
animatedZooms : true,
title : 'dygraphs chart template'
});
};
Here data is which i displayed in pirate-pad.
The problem is I am getting dygraph only at first item but not on remaining.
Here you go :-
In Your Controller.js Define :-
$scope.graphs = [
{
data : data(Place your JavaScript Array here),
},
];
})
.directive(
'graph',
function() {
return {
restrict : 'E',
scope : {
data : '=',
opts : '='
},
template : '<div class="graph"></div><div class="labels"></div>',
link : function(scope, elem, attrs) {
var graph = new Dygraph(elem.children()[0],
scope.data, scope.opts);
}
};
});
In your Home.html define :-
<ion-list>
<div ng-repeat="scout in entry.scouts" >
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout,scout.tempHistory)"
ng-class="{active: isGroupShown(scout)}" >
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div >
<graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
Dygraph have some problem with ng-repeat As I read in the link given bellow :-
Dygraphs not working with ng-repeat
I have a problem with angularJS.
I have a controller that execute a loop. For every element in the list I display all the informations.
Inside every loop, I added another controller (I guess is not a best practice already).
From the inner controller i want to access data from the outer controller.
Now, I don't mind doing this by assigning metadata on the html code, or by javascript code in the controller.
Here what I have done:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}">
<button ng-click="toggleActive($index)"
ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]"
class="">❤</button>
</div>
</div>
</div>
</div>
</div>
This code: ng-init="isActive={{e.Post.isActive}} doesn't work as supposed.
I also tried to assign with data-myData="{{e.Post.isActive}} but at runtime when i tried to access myData from the controller it does access the string {{e.Post.isActive}} instead of accessing the replacement of that placeholder.
Any idea?
Create a directive:
yourModule.directive('postHeart', function() {
return {
restrict: 'E',
scope: {
'e': '=',
'index': '='
},
controller: function($scope) {
var isActive = $scope.e.Post.isActive;
$scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton';
$scope.toggleActive = function(index) {
var postId = $scope.e.Post.id; // access data from the parent controller
// ...
};
},
template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">❤</button>"
};
});
Then use it in template:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<post-heart e="e" index="$index" class="likeHolder"></post-heart>
</div>
</div>
</div>
</div>