My Json file is here.
My HomeController is:
app.controller('HomeController', ['$scope', 'events', function($scope, events) {
events.then(function(data) {
$scope.events = data;
});
$scope.test="success";
}]);
and my html file is:
Home
<h1> {{test}} </h1>
<section class="container" ng-repeat="event in events">
<div class="col-sm-4" >
<div class="card">
<img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
<div class="block">
<h4 class="card-title">{{event.events[0].name.text}}</h4>
<p class="card-text">{{event}}</p>
Go somewhere
</div>
</div>
</div>
</section>
<h1>{{test}}</h1>
My problem occurs when I am trying to loop over "events" array in the JSON file.
I have tried to write "$scope.events = data.events;" in Home controller, " ng-repeat="event in events.events"" or "ng-repeat="event in events[0]"" in html file. This breaks loop and nothing is shown, but if I use "ng-repeat="event in events"" and then variable {{event.events[0].name.text}} in the code later on, it all works fine. I don't understand why there is a problem. It should work fine from my previous experience.
If you declare in your controller
$scope.events = data.data.events;
and have such template:
<section class="container" ng-repeat="event in events">
<div class="col-sm-4">
<div class="card">
<img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
<div class="block">
<h4 class="card-title">{{event.name.text}}</h4>
<p class="card-text">{{event}}</p>
Go somewhere
</div>
</div>
</div>
</section>
it should work. See codepen here
Related
I am creating a list of users on this page using ng-repeat. When the page is refreshed the expression that is supposed to appear shows up for a split second and then disappears without any trace of the object that should be repeated. This is the code
<div class="row" data-ng-controller="createUserProfileController as dashboard">
<h2 class="text-center">Find Students Near By</h2>
<hr />
<div class="col-md-6" id="map-canvas"></div>
<div class="col-md-4 pull-right">
<div class="panel-success">
<div class="panel-heading">
<h3 class="text-center">List of Datalus Users</h3>
</div>
<hr />
<div ng-repeat="userProfile in dashboard.items" class="panel">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-parent="#accordion1" href="/courses/moreinfo/{{userProfile.id}}">
{{userProfile.firstName}}
</a>
</h4>
</div>
</div>
</div><!-- /.cols -->
</div>
</div>
In your code there is no error. Might be you are doing changes from somewhere else. Here I implemented your code in jsfiddle.
angular.module("app", [])
.controller("createUserProfileController", ["$scope", function($scope){
var c = this;
c.items = [
{
id: 1,
firstName: 'hello'
}, {
id: 2,
firstName: 'bufellow'
}
];
}]);
I am learning a Angular and I'm stuck with one task. I have three parts in my app a View, service and controller,
View look like this:
<body ng-app="ForecastApp">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<p class="navbar-brand">Week Forecast</p>
</div>
</nav>
<div class="container-fluid" class="main" ng-controller="MainController">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<h2><span class="label label-info">Search for a City</span></h2>
<div class="input-group">
<input type="text" class="form-control" placeholder="City name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">{{ fiveDay.city.name }}</h1>
<div class="forecast" ng-repeat="day in fiveDay.days">
</div>
</div>
</div>
</div>
</div>
</body>
The service look like this:
app.factory('forecast', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
And the controller look like this:
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}]);
Data for this lesson is take from the rest api from here http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo
How can I go throw all this json resposne and display all the items from the array "list" from this json, for example to look like this:
Date: "2015-06-12 15:00:00"
description: "few clouds"
temp: 26.82
pressure: 1015.2
As I see its simple JSON you can traverse through it using . & whenever required mention index of it to get the value.
Code
$scope.fiveDays = data.list
Markup
<div class="forecast" ng-repeat="day in fiveDays ">
<div>Date : {{dt|date: 'yyyy-dd-MM'}}</div>
<div>description: {{weather[0].description}}</div>
<div>temp: {{main.temp}}</div>
<div>pressure: {{main.pressure}}</div>
</div>
Different angular date filter format
I working on angularjs. I am trying to reorder the ng-repeat list.
There is list of online users.
Users can receive messages anytime. Whenever user receive the message i update the ui and show the recent message under the name.
I am trying to sort the user list based on the users who receive the recent message. The user who receive the messages should come at the top.
Some codes-
Userlist controller:
$scope.$watch('service.get.userList()', function (values) {
var result = [];
angular.forEach(values, function (value) {
processChatService.registerObserverCallback('lastMessage', function () { //i call this event when user receives the message
$scope.$apply(function () {
value.l = processChatService.get.lastMessage(value.u); //returns the recent message
value.time = processChatService.get.lastMessageTime(value.u); //returns time
});
});
value.l = processChatService.get.lastMessage(value.u); //it returns null if user havent recieve message
value.time = processChatService.get.lastMessageTime(value.u);
result.push(value);
});
$scope.users = result;
});
html:
<div ng-repeat="user in users | filter:search"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>
What you'll probably want to do is order the ng-repeat:
<div ng-repeat="user in users | filter:search | orderBy: 'time'">
This will order the users on the time property of each user. It's also possible to reverse the sort order with -time.
For more information on the orderBy filter, check the angular documentation.
We can do this by using orderBy.Now it depends upon the requirement.In your case it is time.
<div ng-repeat="user in users | filter:search | orderby:'time'"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>
For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram
bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});
I am connecting to a web service and want to populate A UI Bootstrap carousel with 4 items for each slide. I am using | limitTo:4, but I need a way to limit 4 per slide out of the 10 total.
Here is the HTML
<div class="row event-slider" ng-controller="eventsController">
<div ng-controller="sliderController">
<carousel interval="interval" class="col-sm-12">
<slide class="col-sm-12">
<div class="col-sm-3 event" ng-repeat="event in eventData | limitTo:4">
<div class="event-inner">
<img ng-src="{{event.image.block250.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.title}}</h4>
<!-- {{event.}} -->
</div>
</div>
</div>
</slide>
</carousel>
</div>
</div>
Controller for reference
app.controller("eventsController", function($scope, $http) {
var events = $http.get('/events');
events.success(function(data) {
$scope.eventData = data.events["event"];
console.log($scope.eventData);
});
});
There is probably an easy solution that Im missing using a ng-repeat filter. Thanks a bunch for the help.
UPDATE: I am not accounting for responsive, but will need to at a later time(agile sprint). Still wrapping my mind around the += in the loop, but its working well. I think I am starting on the 4th item and going up from there... Thanks again for your help.
var events = $http.get('/events');
var i;
events.success(function(data) {
$scope.eventData = data.events["event"];
$scope.slideGroup = [];
for (i = 0; i < $scope.eventData.length; i += 4) {
slides = {
'first' : $scope.eventData[i],
'second' : $scope.eventData[i + 1],
'third' : $scope.eventData[i + 2],
'fourth' : $scope.eventData[i + 3]
};
console.log($scope.slideGroup);
$scope.slideGroup.push(slides);
}
});
HTML:
<carousel interval="interval" class="col-sm-12">
<slide class="col-sm-12" ng-repeat="event in slideGroup">
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.first.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.first.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.second.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.second.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.third.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.third.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.fourth.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.fourth.title}}</h4>
</div>
</div>
</div>
</slide>
</carousel>
I tried this one that has been responsively designedin some way to render different number of items depending on screen resolution.
http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview