I have to show some values from a Json in the {{}} but I see the values just are shown in console and right inside app.controller. Its just going off this app.controller and the values are not shown.
These are some parts of the code:
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dish={
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment....
And finishing:
...date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
};
this.dish = dish;
console.log(dish["name"]); console.log(dish.image); console.log(dish.category);
console.log(dish.label); console.log(dish.price); console.log(dish.description);
console.log("----------------------------------------------------------");
console.log(dish.comments[0]["rating"]); console.log(dish.comments[0]["comment"]);
console.log(dish.comments[0]["author"]); console.log(dish.comments[0]["date"]);
});
console.log("Hey hey hey!");//This shown perfectly in console
console.log(dish.name);//but this is showing... ReferenceError: dish is not defined
And on the view it is not working too...Not is displayed, just blank.
....<img class="media-object img-thumbnail"
ng-src={{image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>....
The ngApp is in html tag:
<html lang="en" ng-app="confusionApp">
And ngController is placed in a div that holds the entire view:
<div class="container" ng-controller="dishDetailController">
So...what's wrong?
You are using Controller as.
Just convert your
<div class="container" ng-controller="dishDetailController">
to
<div class="container" ng-controller="dishDetailController as ctrl">
and access value via ctrl
like this
{{ctrl.dish.name}}
use controller as in the html like this
<div ng-app="confusionApp" ng-controller="dishDetailController as vm">
<img class="media-object img-thumbnail"
ng-src={{vm.image}} alt="Uthappizza">
<div class="media-body">
<h2 class="media-heading">{{vm.dish.name}}
<span class="label label-danger">{{vm.dish.label}}</span>
</div>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dish={
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
};
this.dish = dish;
console.log(dish["name"]); console.log(dish.image); console.log(dish.category);
console.log(dish.label); console.log(dish.price); console.log(dish.description);
console.log("----------------------------------------------------------");
console.log(dish.comments[0]["rating"]); console.log(dish.comments[0]["comment"]);
console.log(dish.comments[0]["author"]); console.log(dish.comments[0]["date"]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionApp" ng-controller="dishDetailController as vm">
<img class="media-object img-thumbnail"
ng-src={{vm.image}} alt="Uthappizza">
<div class="media-body">
<h2 class="media-heading">{{vm.dish.name}}
<span class="label label-danger">{{vm.dish.label}}</span>
</div>
Related
I'm trying to teach myself Knockout.js by making a simple list of games one can add and remove from. At the moment I'm stuck on removing a specific item from an observable array. I have an array of games, and I have it foreach bound to a div that lists out the title, genre, platform, etc. for each game. I also have a Remove button for each game, but they don't work. I have it set up exactly like it is in Knockout's documentation here:
https://knockoutjs.com/documentation/click-binding.html
I also found someone else with the exact same problem here:
Remove items from Knockout observable array
However, the splice solution listed did not work for me. The function did fire this time, but instead of removing the correct item from the array, it removed the last item in the array, regardless of which Remove button was clicked. I'm at a loss as to why the code from Knockout's documentation doesn't work, and why the splice solution isn't working correctly. Here is my code. Pardon all the hard coded values. I'm just trying to get the basics of it working at the moment.
#{
ViewBag.Title = "My Game List";
}
<head>
<script type="text/javascript">
$(function () {
var game1 = ko.observable({
title: 'Bioshock',
genre: 'Shooter',
platform: 'XBox 360',
releaseDate: '8/21/2007',
developer: 'Irrational Games',
publisher: '2K Games',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/6/6d/BioShock_cover.jpg/220px-BioShock_cover.jpg'
});
var game2 = ko.observable({
title: 'The Legend of Zelda: Ocarina of Time',
genre: 'RPG',
platform: 'N64',
releaseDate: '11/21/1998',
developer: 'Nintendo',
publisher: 'Nintendo',
imageURL: 'https://cdn-images-1.medium.com/max/1600/1*n2iccNMASW983gg-ZmMdTw.jpeg'
});
var game3 = ko.observable({
title: 'Devil May Cry',
genre: 'Hack-n-Slash',
platform: 'PS2',
releaseDate: '8/23/2001',
developer: 'Capcom',
publisher: 'Capcom',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/1/1e/DMC1FrontCover.jpg/220px-DMC1FrontCover.jpg'
});
var game4 = ko.observable({
title: 'Comix Zone',
genre: 'Beat-em-Up',
platform: 'Sega Genesis',
releaseDate: '8/2/1995',
developer: 'Sega',
publisher: 'Sega',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0e/Comix_Zone_Coverart.png/220px-Comix_Zone_Coverart.png'
});
var game5 = ko.observable({
title: 'To the Moon',
genre: 'Visual Novel',
platform: 'PC',
releaseDate: '9/1/2011',
developer: 'Freebird Games',
publisher: 'Freebird Games',
imageURL: 'https://steamcdn-a.akamaihd.net/steam/apps/206440/capsule_616x353.jpg?t=1519836062'
});
function gamesViewModel() {
var self = this;
self.gamesList = ko.observableArray([game1, game2, game3, game4, game5]);
self.gameToAdd = ko.observable({
title: 'Mass Effect',
genre: 'RPG',
platform: 'PC',
releaseDate: '11/20/2007',
developer: 'BioWare',
publisher: 'EA',
imageURL: 'https://steamcdn-a.akamaihd.net/steam/apps/17460/header.jpg?t=1447351599'
});
self.addGame = function () {
self.gamesList.push(self.gameToAdd);
};
self.removeGame = function (gameToRemove) {
self.gamesList.remove(gameToRemove);
//var gameIndex = self.gamesList.indexOf(gameToRemove);
//self.gamesList.splice(gameIndex, 1);
};
}
ko.applyBindings(new gamesViewModel);
});
</script>
</head>
<div class="jumbotron">
<h1>TOP 5 GAMES</h1>
</div>
<div class="row">
<h4>Games</h4>
<div class="card-columns" data-bind="foreach: gamesList">
<div class="card">
<a data-bind="attr: {href: imageURL}" target="_blank">
<img class="card-img-top" data-bind="attr: {src: imageURL}" />
</a>
<div class="card-body">
<h5 class="card-title" data-bind="text: title"></h5>
<div class="card-text">
<div>
<span>Genre: </span>
<span data-bind="text: genre" />
</div>
<div>
<span>Platform: </span>
<span data-bind="text: platform" />
</div>
<div>
<span>Release Date: </span>
<span data-bind="text: releaseDate" />
</div>
<div>
<span>Developer: </span>
<span data-bind="text: developer" />
</div>
<div>
<span>Publisher: </span>
<span data-bind="text: publisher" />
</div>
</div>
<button class="btn btn-danger" data-bind="click: $parent.removeGame">-Remove</button>
</div>
</div>
</div>
<button data-bind="click: addGame">+Add</button>
</div>
Using "()" in knockoutjs is very tricky. Your code is perfect but here is the problem. game objects (game1, game2, ... ) are declared as observable (i would keep them as normal variable) and you are pushing observable reference in gamesList not actual values. Thats why remove method is not able to identify it.
Either declare game objects without observable or assign them with "()" in list.
$(function () {
var game1 = ko.observable({
title: 'Bioshock',
genre: 'Shooter',
platform: 'XBox 360',
releaseDate: '8/21/2007',
developer: 'Irrational Games',
publisher: '2K Games',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/6/6d/BioShock_cover.jpg/220px-BioShock_cover.jpg'
});
var game2 = ko.observable({
title: 'The Legend of Zelda: Ocarina of Time',
genre: 'RPG',
platform: 'N64',
releaseDate: '11/21/1998',
developer: 'Nintendo',
publisher: 'Nintendo',
imageURL: 'https://cdn-images-1.medium.com/max/1600/1*n2iccNMASW983gg-ZmMdTw.jpeg'
});
var game3 = ko.observable({
title: 'Devil May Cry',
genre: 'Hack-n-Slash',
platform: 'PS2',
releaseDate: '8/23/2001',
developer: 'Capcom',
publisher: 'Capcom',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/1/1e/DMC1FrontCover.jpg/220px-DMC1FrontCover.jpg'
});
var game4 = ko.observable({
title: 'Comix Zone',
genre: 'Beat-em-Up',
platform: 'Sega Genesis',
releaseDate: '8/2/1995',
developer: 'Sega',
publisher: 'Sega',
imageURL: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0e/Comix_Zone_Coverart.png/220px-Comix_Zone_Coverart.png'
});
var game5 = ko.observable({
title: 'To the Moon',
genre: 'Visual Novel',
platform: 'PC',
releaseDate: '9/1/2011',
developer: 'Freebird Games',
publisher: 'Freebird Games',
imageURL: 'https://steamcdn-a.akamaihd.net/steam/apps/206440/capsule_616x353.jpg?t=1519836062'
});
function gamesViewModel() {
var self = this;
self.gamesList = ko.observableArray([game1(), game2(), game3(), game4(), game5()]);
self.gameToAdd = ko.observable({
title: 'Mass Effect',
genre: 'RPG',
platform: 'PC',
releaseDate: '11/20/2007',
developer: 'BioWare',
publisher: 'EA',
imageURL: 'https://steamcdn-a.akamaihd.net/steam/apps/17460/header.jpg?t=1447351599'
});
self.addGame = function () {
self.gamesList.push(self.gameToAdd);
};
self.removeGame = function (gameToRemove) {
self.gamesList.remove(gameToRemove);
//var gameIndex = self.gamesList.indexOf(gameToRemove);
//self.gamesList.splice(gameIndex, 1);
};
}
ko.applyBindings(new gamesViewModel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron">
<h1>TOP 5 GAMES</h1>
</div>
<div class="row">
<h4>Games</h4>
<div class="card-columns" data-bind="foreach: gamesList">
<div class="card">
<a data-bind="attr: {href: imageURL}" target="_blank">
<img class="card-img-top" data-bind="attr: {src: imageURL}" />
</a>
<div class="card-body">
<h5 class="card-title" data-bind="text: title"></h5>
<div class="card-text">
<div>
<span>Genre: </span>
<span data-bind="text: genre" />
</div>
<div>
<span>Platform: </span>
<span data-bind="text: platform" />
</div>
<div>
<span>Release Date: </span>
<span data-bind="text: releaseDate" />
</div>
<div>
<span>Developer: </span>
<span data-bind="text: developer" />
</div>
<div>
<span>Publisher: </span>
<span data-bind="text: publisher" />
</div>
</div>
<button class="btn btn-danger" data-bind="click: $parent.removeGame">-Remove</button>
</div>
</div>
</div>
<button data-bind="click: addGame">+Add</button>
</div>
app.js //this is my app.js file I've included another file containing the HeaderCtrlModule in it
var app = angular.module("BooKart",["ngRoute","HeaderCtrlModule"]);
app.config(function($routeProvider){
$routeProvider
.when("/books",{
templateUrl: "views/book-list.html",
controller: "BookListCtrl"
})
.when("/kart",{
templateUrl: "views/kart-list.html"
})
.otherwise({
redirectTo: "/books"
})
});
kart-list.html //this loads the kart view
<div>
This is Kart view.
</div>
book-list.html// this loads the booklist view
<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here...">
</div>
</form>
<br/>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in books"
style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to
Kart</button>
</div>
</li>
</ul>
</div>
index.html
<!doctype html>
<html lang="en" ng-app="BooKart">
<head>
<meta charset="utf-8">
<title>Welcome to BooKart</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/controllers/app.js"></script>
<script src="js/controllers/HeaderCtrl.js"></script>
</head>
<body>
<div id="header-wrapper" ng-controller="HeaderCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Books</li>
<li>Kart</li>
</ul>
</div>
</div>
<div ng-view>
</div>
</body>
</html>
HeaderCtrl.js
angular.module("HeaderCtrlModule",[])
.controller("HeaderCtrl",["$scope",function($scope)
{
$scope.appDetails = {};
$scope.appDetails.title = "BooKart";
$scope.appDetails.tagline = "We have 1 Million Books for you";
}])
.controller("BookListCtrl",["$scope","$http",function($scope,$http){
{
$scope.books = [
{
imgUrl: "adultery.jpeg",
name: "Adultery",
price: 205,
rating: 4,
binding: "Paperback",
publisher: "Random House India",
releaseDate: "12-08-2014",
details: "Linda, in her thirties, begins to question the routine and
predictability of her days. In everybodys eyes, she has a perfect life-happy
marriage, children and a career. Yet what she feels is an eno... <a
href='#'>View More<a>"
},
{
imgUrl: "geronimo.jpeg",
name: "Geronimo Stilton Spacemice#2 : You're Mine, Captain!",
price: 168,
rating: 5,
binding: "Paperback",
publisher: "Scholastic",
releaseDate: "01-07-2014",
details: "Geronimo Stilton meets outer space in this cosmically fun
spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo
Stilton of a parallel universe! He is captain of the spaceship Mou... View
More"
},
{
imgUrl: "life-or-death.jpeg",
name: "Life or Death",
price: 339,
rating: 4,
binding: "Paperback",
publisher: "Hachette India",
releaseDate: "01-04-2014",
details: "Why would a man escape from prison the day before he's due
to be released? Audie Palmer has spent a decade in prison for an armed
robbery in which four people died, including two of his gang. Five... View
More"
},
{
imgUrl: "playing.jpeg",
name: "Playing It My Way : My Autobiography",
price: 599,
rating: 5,
binding: "Hardcover",
publisher: "Hodder & Stoughton",
releaseDate: "01-08-2014",
details: "I knew that if I agreed to write my story, I would have to
be completely honest, as thats the way I have always played the game and
that would mean talking about a number of things I have not addr... View
More"
},
{
imgUrl: "the-fault.jpeg",
name: "The Fault in Our Stars",
price: 227,
rating: 4.5,
binding: "Paperback",
publisher: "Penguin Books Ltd",
releaseDate: "25-01-2013",
details: "Despite the tumor-shrinking medical miracle that has
bought her a few years, Hazel has never been anything but terminal, her
final chapter inscribed upon diagnosis. But when a gorgeous plot twist n...
View More"
},
{
imgUrl: "wings-of-fire.jpeg",
name: "Wings of Fire: An Autobiography",
price: 124,
rating: 5,
binding: "Paperback",
publisher: "Universities Press",
releaseDate: "25-08-2000",
details: "Wings of Fire traces the life and times of India's former
president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well
as his growth as India's Missile Man. Summary of the Book Wings... View
More"
}
$scope.addToKart = function(book)
{
console.log("add to kart: ", book);
}
}]);
I think the code looks fine I've also included #!/ rather #/ not sure why it is not working please some take a look at tell me what is wrong. I'm new to angular and there is no error in the console, so that also doesn't help. Thanks in advance. please do help me out
If you don't use local server, Chrome doesn't load other html files in existing html. But, it will work in Firefox browser..
Try visual studio. Create a project in visual studio and run using it.
There are few issues in your code :
Remove extra { in your BookListCtrl function.
Correct your route, change it to : href="#/kart"
See this working plunker
Your included scripts seems to be ok, and just a suggestion your module name is BooKart, not BookKart
This is my first project with angularjs. I'm using md-data-table for angular material web app. I installed md-data-table and it started asking for lodash. So I installed lodash. That's when I got this [error][1]. So I thought maybe angular-lodash might help, and I got another error that says _.methods is not a function. I found some posts about lodash does not support certain functions anymore. But I can't seem to find anything useful to my case. What am i missing here?
Code:
var app = angular.module('app', [
'ngMaterial',
'ngMaterialSidemenu',
'mdPickers',
'ui.grid',
'mdDataTable']);
app.controller('appCtrl', function ($scope, $mdDialog, $mdpTimePicker) {
$scope.items = [1, 2, 3, 4, 5];
$scope.selectedItem = $scope.items[0];
$scope.getSelectedText = function () {
if ($scope.selectedItem != undefined) {
return 'You chose ' + $scope.selectedItem + '.';
} else {
return 'Choose an item.';
}
};
$scope.selectedTime = $scope.selectedDate = new Date();
$scope.message = 'Hello';
// directive
$scope.point = {
pointId: '1001'
};
$scope.browser = function (ev) {
var searchByColumns = [
'Point ID',
'Description'
];
var pointList = [{
pointId: '1001',
description: 'point 1'
}, {
pointId: '1002',
description: 'point 2'
}, {
pointId: '1003',
description: 'point 3'
}];
$mdDialog.show({
templateUrl: '/dialogs/browser/grid-browser.html',
parent: angular.element(document.body),
targetEvent: ev,
locals: {
items: pointList,
searchByColumns: searchByColumns
},
openFrom: '#searchBtn',
clickOutsideToClose: true,
controller: function ($scope, items, searchByColumns) {
$scope.items = items;
$scope.searchByColumns = searchByColumns;
$scope.selectedColumn = $scope.searchByColumns[0];
$scope.getSelectedText = function () {
return $scope.selectedColumn;
};
}
})
// .then(function (answer) {
// $scope.status = 'You said the information was "' + answer + '".';
// }, function () {
// $scope.status = 'You cancelled the dialog.';
// })
;
};
$scope.nutritionList = [{
id: 601,
name: 'Frozen joghurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
}, {
id: 602,
name: 'Ice cream sandwitch',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '84%',
iron: '1%'
}, {
id: 603,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 24,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
}];
});
<html lang="en">
<head>
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.css"></link>
<link rel="stylesheet" href="/node_modules/mdPickers/dist/mdPickers.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-time-picker/dist/md-time-picker.css"></link>
<link rel="stylesheet" href="/assets/md-data-table/md-data-table.min.css"></script>
<link rel="stylesheet" href="/assets/css.css"></link>
<link rel="stylesheet" href="/assets/icons.css"></link>
<link rel="stylesheet" href="/assets/ui-grid/ui-grid.min.css"></link>
<link rel="stylesheet" href="/main.css"></link>
</head>
<body ng-app="app" ng-controller="appCtrl" ng-cloak>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content layout-padding layout="row">
<md-sidemenu locked="false">
<md-sidemenu-group>
<md-sidemenu-content md-icon="home" md-heading="Master" md-arrow="true">
<md-sidemenu-button ng-href="#pointMaster">Point</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
<md-sidemenu-content md-heading="Menu 2" md-arrow="true">
<md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
</md-sidemenu-group>
<md-sidemenu-group>
<md-divider></md-divider>
<md-subheader class="md-no-sticky">Caption</md-subheader>
<md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
</md-sidemenu-group>
</md-sidemenu>
<md-tabs md-dynamic-height md-border-bottom flex="75">
<md-tab label="Tax">
<form flex>
<div layout="row" layout-align="start center">
<input-button flex="50" md-margin required="false" label="Point ID" tableId="point.pointId" browse="browser()"></input-button>
<span style="width: 20px"></span>
<md-checkbox aria-label="Default" class="md-primary" layout-align="center center" flex>
Default
</md-checkbox>
</div>
<div layout="row">
<md-input-container>
<label>Items</label>
<md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
<md-optgroup label="items">
<md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<mdp-time-picker mdp-auto-switch="true" ng-model="selectedTime" message="message">
</mdp-time-picker>
</div>
<div layout="row" flex>
<md-button class="md-raised md-primary">Save</md-button>
<md-button class="md-raised md-warn">Delete</md-button>
<md-button class="md-raised md-primary" ng-disabled="true">Reset</md-button>
</div>
<div layout="row" flex>
<md-datepicker ng-model="selectedDate" md-placeholder="Enter date" layout-align="start center" md-open-on-focus>
</md-datepicker>
</div>
</form>
</md-tab>
<md-tab label="Family" layout="column" flex>
<mdt-table mdt-row="{'data': nutritionList, 'table-row-id-key': 'id',
'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']}">
<mdt-header-row>
<mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
<mdt-column align-rule="right">Calories</mdt-column>
<mdt-column align-rule="right">Fat (g)</mdt-column>
<mdt-column align-rule="right">Carbs (g)</mdt-column>
<mdt-column align-rule="right">Protein (g)</mdt-column>
<mdt-column align-rule="right">Sodium (mg)</mdt-column>
<mdt-column align-rule="right">Calcium (%)</mdt-column>
<mdt-column align-rule="right">Iron (%)</mdt-column>
</mdt-header-row>
<mdt-custom-cell column-key="Dessert" ng-click="viewFats(value)">
<span ng-repeat="name in names">{{value}}</span>
</mdt-custom-cell>
</mdt-table>
</md-tab>
</md-tabs>
</md-content>
</body>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-messages/angular-messages.js"></script>
<script src="/node_modules/moment/moment.js"></script>
<script src="/node_modules/angular-moment/angular-moment.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.js"></script>
<script src="/node_modules/mdPickers/dist/mdPickers.js"></script>
<script src="/node_modules/angular-material-time-picker/dist/md-time-picker.js"></script>
<script src="/assets/lodash/lodash.min.js"></script>
<script src="/assets/md-data-table/md-data-table.min.js"></script>
<script src="/assets/md-data-table/md-data-table-templates.min.js"></script>
<script src="/assets/ui-grid/ui-grid.min.js"></script>
<script src="/assets/angular-material-icons.min.js"></script>
<script src="/app.js"></script>
<script src="/directives/input-button/input-button.js"></script>
<script src="/dialogs/browser/grid-browser.js"></script>
</html>
ps://i.stack.imgur.com/WmdiC.png
#Htet Aung,
The code snippet provided by you does not have valid md-data-table tags in html and also errors while injecting md-data-table. For your information you are using "mdDataTable" which was designed for ANGULAR (angular2) version. But looking at your code suggests you need md-data-table for Angularjs(version 1.x).
No Need for loadash libraries. just normal md-data-table.js from cdnjs will do and inject the dependency 'md.data.table' in your module.
Please find the below :
[MD Data Table for AngularJs Material and Angularjs 1.x version]
[1]: https://codepen.io/anon/pen/BjvLVJ?editors=1010
I want to display the comments in a specific order by typing date, author, and rating in the input section.They should also be able to sorted in descending order, for example, if -date is typed. I'm stuck.
Comments sorting
Here's my code.
<ul class="list-unstyled" ng-repeat="comment in dishDetailCtrl.dish.comments | orderBy:dishDetailCtrl.sortBy">
<li><blockquote>
<h4>{{comment.rating}} Stars</h4>
<h4>{{comment.comment}}</h4>
<footer>
{{comment.author}}, {{comment.date | date:mediumDate}}
</footer>
</blockquote></li>
</ul>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dish={
name:'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
};
this.dish = dish;
});
</script>
Above code seems to be working, I think the you missed to write ng-model variable name incorrectly of SortBy input.
It should be
ng-model="dishDetailCtrl.sortBy"
instead of
ng-model="sortBy"
HTML
<div ng-controller="dishDetailController as dishDetailCtrl">
Sort By <input type="text" ng-model="dishDetailCtrl.sortBy">
<ul class="list-unstyled" ng-repeat="comment in dishDetailCtrl.dish.comments | orderBy:dishDetailCtrl.sortBy">
<li>
<blockquote>
<h4>{{comment.rating}} Stars</h4>
<h4>{{comment.comment}}</h4>
<footer>
{{comment.author}}, {{comment.date | date:mediumDate}}
</footer>
</blockquote>
</li>
</ul>
</div>
Demo Plunkr
<div class="col-xs-9 col-xs-offset-1">
<div class="container">
<div class="row">
<div class="col-xs-2">Customer Comments</div>
<div class="col-xs-3-offset-1">
Sort by<input type="text" ng-model="dishDetailControllerSortBy" value=" ">
</div>
</div>
<div class="media-list" ng-repeat="cmnt in dishCtrl.dish.comments | orderBy:dishDetailControllerSortBy">
<div class="media">
<blockquote>{{cmnt.comment}}
<footer>
{{cmnt.author}},{{cmnt.date | date:format:mediumDate}}
</footer></blockquote>
</div>
</div>
</div>
</div>
<input ng-model="userInput"> </input> </p>
<blockquote ng-repeat="comment in dishCtrl.dish.comments | orderBy:userInput">
{{comment.rating}} Stars
{{comment.comment}}
<footer>{{comment.author}} {{comment.date | date:'medium'}}</footer>
</blockquote>
Is there any option to open first accordion on the basis of ngRepeat ?
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.status = {
isFirstOpen: true,
oneAtATime: true
};
$scope.cards = [{
"id": 1,
"bankid": 999999,
"type": "VISA",
"no": "1234 5678 9012 3456",
"from": "01/06",
"expiry": "05/18",
"cvv": 345,
"name": "Kallayi Basheer Shah"
}, {
"id": 2,
"bankid": 888888,
"type": "Master",
"no": "3456 7890 1234 5678",
"from": "06/12",
"expiry": "07/16",
"cvv": 678,
"name": "Shah Basheer"
}, {
"id": 3,
"bankid": 777777,
"type": "VISA",
"no": "9012 3456 1234 5678",
"from": "03/10",
"expiry": "08/17",
"cvv": 123,
"name": "Basheer Shah Kallayi"
}];
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
<div class="row">
<div class="col-md-12">
<accordion close-others="status.oneAtATime">
<accordion-group ng-repeat="card in cards">
<accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
<div class="row">
<div class="col-sm-12">
Name on card: {{card.name}}
<br>Card type: {{card.type}}
</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>
While assigning is-open to a model certainly works, if you are not planning to change the behavior dynamically, you can also fix it to the first element using
is-open="$first"
Yes, the angular-ui accordion has the is-open attribute which is compatible with ng-repeat.
Using $first works if all you have in your <accordion-heading> is static behavior/ content as #Icycool states in their answer.
If you wanted to make use of the changing chevrons angular-ui uses in their accordion example however, this would not work.
In order to have the first item default to open and still maintain chevron (or other content) updates, simply give the first item its own accordion group, a boolean in the scope, and refer to the 0th index like so:
accordionController.js:
$scope.isFirstOpen = true;
accordionExample.html:
<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
<accordion-heading>
<div>
<i class="glyphicon glyphicon-credit-card"></i>
<strong>{{cards[0].no}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':
isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
</div>
</accordion-heading>
<div>
Name on Card: {{cards[0].name}} <br>
Card Type: {{cards[0].type}}
</div>
</accordion-group>
Then, create the rest similarly, giving them their own open boolean and using the array's slice() method to refer to all the rest of the items like so:
accordionController.js:
$scope.isOpen = false;
accordionExample.html:
<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
<accordion-heading>
<div>
<i class="glyphicon glyphicon-credit-card"></i>
<strong>{{card.no}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':
isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</div>
</accordion-heading>
<div>
Name on Card: {{card.name}} <br>
Card Type: {{card.type}}
</div>
</accordion-group>
Check out this CodePen demo to see it in action: http://codepen.io/anon/pen/JdpNgB?editors=101
In the template, bind the is-open property of the accordion as follow:
<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">
and in the controller: $scope.status = { isItemOpen: [true] };
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.status = {
isFirstOpen: true,
oneAtATime: true,
isItemOpen: [true]
};
$scope.cards = [{
"id": 1,
"bankid": 999999,
"type": "VISA",
"no": "1234 5678 9012 3456",
"from": "01/06",
"expiry": "05/18",
"cvv": 345,
"name": "Kallayi Basheer Shah"
}, {
"id": 2,
"bankid": 888888,
"type": "Master",
"no": "3456 7890 1234 5678",
"from": "06/12",
"expiry": "07/16",
"cvv": 678,
"name": "Shah Basheer"
}, {
"id": 3,
"bankid": 777777,
"type": "VISA",
"no": "9012 3456 1234 5678",
"from": "03/10",
"expiry": "08/17",
"cvv": 123,
"name": "Basheer Shah Kallayi"
}];
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
<div class="row">
<div class="col-md-12">
<accordion close-others="status.oneAtATime">
<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">
<accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
<div class="row">
<div class="col-sm-12">
Name on card: {{card.name}}
<br>Card type: {{card.type}}
</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>