I am trying to learn Angular and stuck in the following Image array. Can anyone please explain what is the problem in my code and how to fix this ?
FilterAndImages.html
<!DOCTYPE html>
<html ng-app="store">
<head>
<title>First Angular</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="container">
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
<li class="list-group-item">
<h3> {{product.name}} </h3>
<p> {{product.description}} </p>
<img ng-src="{{product.images[0].full}}" />
<em class="pull-right">
{{product.price | currency}}
<br><button ng-show="product.canPurchase"> Add to Cart </button>
</em>
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="App.js"></script>
</body>
</html>
App.js
(function () {
var app = angular.module('store', []);
var gems = [{
name: 'Ruby',
price: 2.95,
description: 'This is Ruby on Rails :)',
canPurchase: true,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
]
},
{
name: "Black Pearl",
price: 1.5,
description: "Jack Sparrow !!",
canPurchase: false,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
],
}];
app.controller('StoreController', function () {
this.products = gems;
});
})();
I will be really thankful to you guys.
I created a plunker example with your code , that makes the order ,check it here:
https://plnkr.co/edit/uVDl51EyRuwNmj428it1?p=preview
instead of <ul class="list-group" ng-repeat="product in products | orderBy ='price'">
try to use ':' instead of '=' on the orderby:
<ul class="list-group" ng-repeat="product in products | orderBy :'-price'">
One of the problems stands in the way you call the orderBy filter.
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
should become:
<ul class="list-group" ng-repeat="product in store.products | orderBy: 'price'">
For further options on this feature please see official documentation.
try this
app.controller('StoreController', function ($scope) {
$scope.products = gems;
});
Related
I am trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.
The problem is that $scope does not seem to be available in View1 or in its called JS function , so ng-repeat doesn't seem to find anything to display, and addCustomer cannot see $scope.newCustomer.name. I am sure that I am missing something simple.
index.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->
<script>
var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies
// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'
}
var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'
}
$stateProvider.state(nameState);
$stateProvider.state(cityState);
$urlRouterProvider.otherwise('/view1');
});
// controller
demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;
$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];
$scope.addCustomer = function () {
$log.log("Add customer");
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
});
</script>
</head>
<body>
<div>
<!-- placeholder for views inserted by ui-router -->
<ui-view></ui-view>
</div>
</body>
</html>
View1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<ul>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
</div>
Switch to View 2
</div>
Use only
ng-repeat="cust in customers"
You don't have to specify $scope in the html:
ng-repeat="cust in customers"
try this :
<li ng-repeat="cust in customers">
you dont need to mention $scope.customers
try this (remove "$scope.") :
ng-repeat="cust in customers | filter:filter.name"
instead of :
ng-repeat="cust in $scope.customers | filter:filter.name"
Using AngularJS, I need to create a directive that loops through an array and displays the relevant information:
Here is my code so far but for some reason it is now working.
Kindly help. What is being displayed is the text below as plain text. Obviously the images are not being loaded as well.
info.title
info.developer
info.price | currency
Here are the files used.
appInfo.html - the template to be used by the directive for each element
<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>
appInfo.js - directive
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'appInfo.html'
};
});
app.js - module
var app = angular.module('AppMarketApp', []);
controller - repeated elements to test
app.controller('MainController', ['$scope', function($scope) {
$scope.apps =
[
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
},
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
}
];
}]);
index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<!-- Include the AngularJS library -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="AppMarketApp">
<div class="header">
<div class="container">
<h1>App Market</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="a in apps">
<app-info info="{{a}}"></app-info>
</div>
</div>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="appInfo.js"></script>
</body>
</html>
Thanks in advance.
You should do
<div class="card" ng-repeat="a in apps">
<app-info info="a"></app-info>
</div>
Attributes that already expect expressions don't need curly braces.
I am new to angular js
Controller is not working correctly in my code
i am trying to run following code
<!DOCTYPE html>
<html data-ng-app >
<head>
<title>Using AngularJS Directives and Data binding</title>
</head>
<body>
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name"/>{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
</ul>
</div>
<script src= "angular/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.controller('SimpleController', function($scope){
$scope.customers=[
{name:'John Smith', city:'kashipur'},
{name:'John fds' , city:'san francisko'},
{ name:'shubham', city:'giarhineg'},
{name:'batra', city:'world'}];
});
</script>
</body>
</html>
</html>
but its not giving desire output .
please tell me if i am doing something wrong .
You are missing to add value in your ng-app directive that tell angular to run demoApp module on the page.
ng-app="demoApp"
You should add the name of your app.
ng-app="demoApp"
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Smith',
city: 'kashipur'
}, {
name: 'John fds',
city: 'san francisko'
}, {
name: 'shubham',
city: 'giarhineg'
}, {
name: 'batra',
city: 'world'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{cust.name | uppercase}}-{{cust.city | lowercase}}</li>
</ul>
</div>
</div>
I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
I need to filter the rows in witch the property "age" is greater than "x" number
Older than 18
<div ng-repeat="person in persons | filter:personFilter ">
<div>{{person.name}}</div>
<div>{{person.age}}</div>
</div>
Thanks in advance
According to the docs, you can pass a function to filter: Here's an example.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="example" ng-controller="Ex">
<!-- on click set the filter to our custom function defined in scope -->
Older than 18
<ul>
<li ng-repeat="p in people | filter:personFilter">
{{p.name}} - {{p.age}}
</li>
</ul>
</body>
</html>
controller:
angular.module('example', [])
.controller('Ex', function($scope) {
$scope.personFilter = {};
$scope.people = [
{name: "Bob", age: 32},
{name: 'Billy', age: 12}
];
/* returns true if the provided person is over 18 */
$scope.isOver18 = function(p) {
return p.age > 18;
}
});