I want to insert a dictionary (array of objects) into the view in my project . The view is called "product", the controller is called "ProductCtrl".
The output I want to show is just static data. Below is my code:
/*
* "product" module.
*/
'use strict';
angular.module('myApp.products', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/products', {
templateUrl: 'products/products.html',
controller: 'ProductCtrl'
});
}])
.controller('ProductCtrl', [function($scope) {
//the problem is that I wanna insert those elements using angular and I cannot.
$scope.productos=[
{titulo:"1111", descripcion:"!", precio: 25.95, imagen: "camisetas2.png"},
{titulo:"2222", descripcion:"!A", precio: 25.95, imagen: "camisetas3.png"}
];
}]);
<!--("Producto" View-HTML)-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-controller="ProductCtrl">
<div class="col-md-12">
<div class="row" ng-repeat="producto in productos"> <!-- Basic for loop -->
<div class="col-md-12">
<!-- Inicio del contenido; se exponen la empresa y sus servicios (9/4 grid system) -->
<h2>{{ producto.titulo }}</h2>
<div class="row">
<div class="col-md-2">
<img width="120" height="120" alt="mundo camis" src="img/mundo.jpg" class="img-circle">
</div>
<div class="col-md-10">
<div class="caption">
<h3> {{ producto.titulo }} </h3>
<p> {{ producto.descripcion }} </p>
<p> <a class="btn-primary" href="#">Ver más</a> </p>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
</div>
</div>
</div>
You had a few mistakes, and the most important - not setting the ng-app attribute. I made a simple example for you to use. Code below, link here: http://codepen.io/anon/pen/GoqWyM.
I advise learning Angular from the following tutorial: http://campus.codeschool.com/courses/shaping-up-with-angular-js/ .
The answer:
/*
* "product" module.
*/
'use strict';
var app = angular.module('Products', []);
app.controller('Producto', [function() {
this.productos=[
{titulo:"1111", descripcion:"!", precio: 25.95, imagen: "camisetas2.png"},
{titulo:"2222", descripcion:"!A", precio: 25.95, imagen: "camisetas3.png"}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Products" class="row" ng-controller="Producto as ProdCtrl">
<div ng-repeat="producto in ProdCtrl.productos">
{{ producto.titulo }}
</div>
</div>
Related
So I'm trying to add routes to my angularJS app, and I'm running intro a problem where the main controller for my app stops working if I try to add 'ngRoute' to the app. Additionally, ngRoute is not working.
My code:
app.js (angular logic)
(function() {
angular.module('fccNight', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'results.html'
})
.otherwise({ redirectTo: '/' });
}])
//controllers
.controller('mainController', ['$scope', '$http', function($scope, $http) {
$scope.searchTerm = '';
$scope.data = [];
$scope.loading = false;
$scope.goingNo = [];
$scope.getResults = function() {
if($scope.searchTerm !== '') {
$scope.loading = true;
$scope.data = [];
$http.get('/api/search?term=' + $scope.searchTerm)
.success(function(results) {
$scope.loading = false;
$scope.data = results;
for(var i = 0; i < $scope.data.length; i++) {
$scope.goingNo.push($scope.data[i].going);
}
});
}
}
$scope.addGoing = function(index) {
// check if user is authenticated
if($scope.data[index].going > $scope.goingNo[index]) {
$scope.data[index].going -= 1;
}
else {
$scope.data[index].going += 1;
}
// register in db
}
}])
})();
index.html's body:
<body ng-controller="mainController" id="mainController">
<!-- CONTENT -->
<div class="container">
<div class="row text-center">
<div class="col-xs-12 main">
<h1>Where are you going tonight?</h1>
<p>Find nearby pubs and RSVP ahead of time.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
<form>
<div class="input-group">
<input id="inputSearch" ng-model="searchTerm" type="text" class="form-control" placeholder="Where are you?" autocomplete='off'>
<span id="goBtn" class="input-group-btn">
<a ng-click="getResults()" class="btn btn-default">Go</a>
</span>
</div>
</form>
</div>
</div>
<!-- LOADING -->
<div class="row loading hidden" ng-show="loading">
<div class="col-xs-12">
<div class="loader"></div>
</div>
</div>
<div class="text-center">Controller is working if search term is displayed: {{ searchTerm }}</div>
<!-- TEMPLATE -->
<div ng-view></div>
</div>
<!-- footer -->
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<a href="https://github.com/otmeek/fcc-night">
<i class="fa fa-github"></i>
</a> |
<a href="https://www.freecodecamp.com">
<i class="fa fa-fire"></i>
</a> | built using the Yelp API
</div>
</div>
</div>
</footer>
<!-- =====================SCRIPTS===================== -->
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<!-- custom scripts -->
<script src="js/app.js"></script>
<script src="js/scripts.js"></script>
</body>
results.html (the template I want to load in on '/' route)
<p>Results are loading</p>
<div class="row result" ng-repeat="result in data">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2 result">
<div class="row">
<!-- image -->
<div class="col-xs-3 col-sm-2">
<div class="image">
<img ng-src="{{ result.image || 'img/noimage.jpg' }}">
</div>
<div ng-click="addGoing($index)" class="going text-center">
{{ result.going || 0 }} going
</div>
</div>
<!-- text -->
<div class="col-xs-9 col-sm-10">
<h4><a ng-href="{{ result.url || '#' }}">{{ result.name }}</a>
<small>{{ 'Rating: ' + result.rating || 'No rating available' }}</small></h4>
<p>{{ result.text || 'No reviews for this establishment.' }}</p>
</div>
</div>
</div>
</div>
As I said, if I remove all the routing logic from app.js and ng-view from index.html and just add in results.html, the app is running fine, controller is loading properly and everything is ok. But upon adding 'ngRoute' to the app, the results template doesn't load and I can't access any mainController variables or logic from index.html.
If anyone knows what I'm doing wrong please let me know. Thanks!
Edit: I just noticed the cdn for angular-route.js is not working. I can't find a download link for this library in the official site and I don't have bower so I have no idea where to get this file.
There is an error for angular-route.js
https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
its adress is wrong. There is no version for it. Write your version insteadof X.Y.Z
suchas https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js
You need to change X.Y.Z by any specific version like 1.4.8 in your index.html page for angular route.
So you should use
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
instead of
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
I'm unable to figure out the mistake that's leading to nothing displaying in my div.
HomeController.js (Controller):
app.controller('HomeController', ['$scope', function($scope) {
$scope.icons = [
...
];
$scope.works = [
{
title: 'An Artsy Title for an Artsy Image',
img: 'img/an-artsy-image.png',
orientation: 'portrait',
description: "A artsy description here."
}
];
}]);
index.html (Homepage):
<!DOCTYPE HTML>
<html ng-app="portfolio">
<head>
...
<!-- AngularJS Controller -->
<script src="js/controllers/HomeController.js" type="text/javascript"></script>
<!-- AngularJS Directive -->
<script src="js/directives/introIcon.js" type="text/javascript"></script>
<script src="js/directives/workExpo.js" type="text/javascript"></script>
...
</head>
<body ng-controller="HomeController">
<div class="container-fluid hero">
...
</div>
<div class="container-fluid work-wrapper">
<div class="container work-container">
<div ng-repeat="work in works">
<work-expo info="work"></work-expo>
</div>
</div>
</div>
</body>
</html>
workExpo.js (Directive):
app.directive("workExpo", function() {
return {
restrict: 'E',
scope: 'info',
templateUrl: 'views/directives/workExpo.html'
};
});
workExpo.html (Directive Template):
<div class="row" ng-if="info.orientation === 'landscape'">
<div class="col-lg-12">
<img ng-src="{{ info.img }}" class="img-responsive center-block" />
</div>
<div class="col-lg-12">
<h3>{{ info.title }}</h3>
<p>{{ info.description }}</p>
</div>
</div>
<div class="row" ng-if="info.orientation === 'portrait'">
<div class="col-sm-6">
<img ng-src="{{ info.img }}" class="img-responsive center-block" />
</div>
<div class="col-sm-6">
<h3>{{ info.title }}</h3>
<p>{{ info.description }}</p>
</div>
</div>
It is not clear of what is it that I'm missing in the above code which is leading to my code not displaying at all. To my knowledge there is no problem with the controller or directive in general as the other directive in my code (code not shown) is working just fine.
This is what the code becomes post-compilation as per Chrome's code inspector:
...
<div class="container-fluid work-wrapper">
<div class="container work-container">
<!-- ngRepeat: work in works -->
<div ng-repeat="work in works" class="ng-scope">
<work-expo info="work">
<!-- ngIf: info.orientation === 'landscape' -->
<!-- ngIf: info.orientation === 'portrait' -->
</work-expo>
</div>
<!-- end ngRepeat: work in works -->
</div>
</div>
...
Now clearly, it has not returned any DOM elements under <!-- ngIf: info.orientation === 'portrait' --> which should rather be the case.
Please let me know in case you need any further details. Thanks.
Your scope binding is incorrect in your directive. You need to construct an object with an info property and add 2-way binding of that to the info attribute. Yu can do this as so:
scope: {info:'=info'},
This creates an info property on the scope which evaluates the value of the info attribute, i.e. evaluates work on the parent scope.
Your full directive code therefore becomes:
app.directive("workExpo", function() {
return {
restrict: 'E',
scope: { info: '=info' },
templateUrl: 'views/directives/workExpo.html'
};
});
and everything else can stay the same.
Working JsFiddle
<!-- ngIf: info.orientation === 'landscape' -->
<!-- ngIf: info.orientation === 'portrait' -->
It shows both are not matching so nothing shows
I check your code and it looks good, do one thing to check the value, put following code any where on your page
<pre>
{{ info | json}} - {{ info.orientation | json}}
</pre>
I'm trying to get books to display based on the assignment above but can't figure out what is wrong for the life of me.
I built the service and modified the controller and view pages to the point where I believe they should display the books in the view, but I'm just seeing a blank page.
I feel like I am probably not retrieving the data properly and accessing it in the view/html.
Any ideas? Link to jsFiddle.
Index.html
<body ng-app="ReaderApp">
<div class="header">
<div class="container">
Reader
</div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
js/apps.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirecTo: '/books'
});
});
js/services/books.js
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
js/controllers/BookshelfController
app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
js/views/bookshelf.html
<div class="bookshelf row">
<!--
TODO: Loop through myBooks and display each one with this HTML
<div class="book col-md-3">
<a href="#/books/{{$index}}">
TODO: Add the book's cover here
<h3 class="title"> </h3>
<p class="author"> </p>
</a>
</div>
-->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}">
<img ng-src="{{ book.cover }}">
<h3 class="title">{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
</a>
</div>
</div>
I think I had the same trouble and my problem was in the router. Try adding array brackets ( [ ] ) and the '$routeProvider' string in your config method (app.js) like this:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
Coming from Ember, the syntax is a little weird so I've been using this tutorial as reference when I get stuck.
Hi I am trying to retrieve data from the server using $http, and correct data is being retrieved from the service, the data is -
[{
"URL":"someimg.jpg",
"TITLE":"Test Demo",
"DATE_ADDED":"2014-02-08 00:46:00",
"SUMMARY":"this is summary"
}]
the template that I wrote is as follows -
<article class="span8" ng-controller="allBlogs">
<div ng-show="success">
<div ng-repeat="blog in blogs.data">
<div class="row">
<div class="span3">
<img ng-src="{{blog['URL']}}" alt="" />
</div>
<div class="span5" ng-repeat-end>
<h4>{{blog.TITLE}}</h4>
<p>{{blog.DATE_ADDED}}</p>
<p>{{blog.SUMMARY}}</p>
</div>
</div>
</div >
</div>
</article>
the controller for the above template is as follows -
pk.controller("allBlogs", function($scope, $http, BlogsHandler){
$scope.success = false;
(function(){
BlogsHandler.getAllBlogs().success(function(data){
console.log(data);
$scope.success = true;
$scope.blogs = data.data;
});
})();
});
I am trying to set the success as true when the service returns data and thus the remaining part of the template should run. But this is not happening. Is it not that any change to $scope variable is being watched by the framework itself?
Help needed. I even tried with ng-switch with no effect.
Thanks
You assign data.data to $scope.blogs, so you don't need to add .data before blogs again.
$scope.blogs = data.data;
So, try this:
<div ng-repeat="blog in blogs track by $index">
<div class="row">
<div class="span3">
<img ng-src="{{blog.URL}}" alt="" />
</div>
<div class="span5">
<h4>{{blog.TITLE}}</h4>
<p>{{blog.DATE_ADDED}}</p>
<p>{{blog.SUMMARY}}</p>
</div>
</div>
</div >
I'm trying to paginate my blogroll using AngularJS and the MEAN Stack. I have my Articles (blog posts) controller set up, and I've list.html to display everything. I can either get all the blogs to display, or I can get the pagination to increment, but I can't get the blogroll to show 5 items at a time and increment with the pagination.
angular.module('mean.articles')
.controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Global', 'Articles', function ($scope, $routeParams, $location, Global, Articles) {
$scope.global = Global;
$scope.currentPage = 0;
$scope.pageSize = 5;
//I've my create, update and delete methods here.
$scope.find = function() {
Articles.query(function(articles) {
$scope.articles = articles;
});
};
$scope.numPages = function() {
return Math.ceil($scope.Articles.length / $scope.pageSize);
};
And here's my list.html:
<div class="container" style="width:900px; margin:auto">
<div class="container" style="width:600px; float:left">
<section data-ng-controller="ArticlesController" data-ng-init="find()">
<ul class="articles unstyled" style="width:600px">
<li data-ng-repeat="article in articles | filter:search | limitTo:pageSize">
<h2><a data-ng-href="#!/articles/{{article._id}}">{{article.title}}</a></h2>
<div>{{article.content}}</div>
<div>{{article.tags}}</div>
<h4><small>
<div class="well well-small text-center" style="width:300px">
<div style="margin:auto">
<span>{{article.created | date:'medium'}}</span> /
<span>{{article.user.name}}</span>
</div>
</div>
</small></h6>
</li>
</ul>
<h1 data-ng-hide="!articles || articles.length">No articles yet. <br> Why don't you Create One?</h1>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numPages()}}
<button ng-disabled="currentPage >= numPages()-1" ng-click="currentPage=currentPage+1">
Next
</button>
</section>
</div>
<div class="container" style="width:300px; float:left">
<input type="text" ng-model="search" placeholder="Enter your search terms" />
</div>
http://jsfiddle.net/2ZzZB/56/ from Pagination on a list using ng-repeat. It looks like the main thing you're missing is a way to indicate where to start your ng-repeat. The fiddle I linked to solves it by creating a startFrom filter.