I have a problem when clicking on images the mp3 plays, but when i make a query on ng-repeat it doesn't work anymore.
It's from the getElementsByClassName index, but i need to fix it.
Is there any good way to make it work with angular, like ng-audio ?
<html>
<heaD>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-audio/1.7.2/angular.audio.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('controller', ['$scope', function($scope) {
$scope.playit = function(id){
var audio = document.getElementsByClassName("audio")[id];
audio.play();
}
$scope.data=[{
id: 0,
categorie: ['Rectorat', 'General', 'Secretariate'],
denumire: 'Rectorat',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 1,
categorie: ['Juridic', 'General', 'Secretariate'],
denumire: 'Juridic',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 2,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'indicatii',
linkHarta: ''
},
{
id: 3,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/test.mp3",
descriereText: 'indicatii',
linkHarta: ''
}];
}]);
</script>
<style>
.col-xs-12 {
padding-bottom:10px;
}
.col-sm-6 {
padding-bottom:10px;
}
.centrat {
margin: auto;
}
</style>
</heaD>
<body ng-app="myApp" data-ng-cloak data-ng-controller="controller">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="img/logo-site.jpg" class="centrat img-responsive"></span>
</div>
</div>
<div class="row">
<div class="col-lg-12" style="padding-bottom: 20px;">
<input type="textarea" class="form-control" ng-model="query.categorie" placeholder="Cautare" style="width: 100%; height: 100px;">
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter:query" >
<div >
<img class="img-responsive" ng-src="img/{{locatie.imagine}}" style="margin: auto;" ng-click="playit(locatie.id)">
<audio class="audio" ng-src="{{locatie.linkAudio}}" ></audio>
</img>
<p style="font-size: 10px;">{{locatie.denumire}} |
{{locatie.descriereText}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
I fix your code, it's work for me
<!DOCTYPE html>
<html>
<heaD>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-audio/1.7.2/angular.audio.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('controller', ['$scope', '$sce', function($scope, $sce) {
var arrayPL = document.getElementsByClassName("audio");
$scope.playit = function(id){
var audio = arrayPL[id];
if (audio.paused === false) {
audio.pause();
} else {
audio.play();
}
}
$scope.data=[{
id: 0,
categorie: ['Rectorat', 'General', 'Secretariate'],
denumire: 'Rectorat',
imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 1,
categorie: ['Juridic', 'General', 'Secretariate'],
denumire: 'Juridic',
imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 2,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
descriereText: 'indicatii',
linkHarta: ''
},
{
id: 3,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
descriereText: 'indicatii',
linkHarta: ''
}];
$scope.trustURL = function (url) {
return $sce.trustAsResourceUrl(url);
}
}]);
</script>
<style>
.col-xs-12 {
padding-bottom:10px;
}
.col-sm-6 {
padding-bottom:10px;
}
.centrat {
margin: auto;
}
.img-responsive {
width: 100px;
}
</style>
</heaD>
<body ng-app="myApp" data-ng-cloak data-ng-controller="controller">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="img/logo-site.jpg" class="centrat img-responsive">
</div>
</div>
<div class="row">
<div class="col-lg-12" style="padding-bottom: 20px;">
<input type="textarea" class="form-control" ng-model="query.categorie" placeholder="Cautare" style="width: 100%; height: 100px;">
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter:query" >
<div >
<img class="img-responsive" ng-src="{{trustURL(locatie.imagine)}}" ng-click="playit(locatie.id)">
<audio class="audio" ng-src="{{trustURL(locatie.linkAudio)}}" ></audio>
<p style="font-size: 10px;">{{locatie.denumire}} |
{{locatie.descriereText}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
Notes:
You need to use $sce.trustAsResourceUrl, then you're able use the imagine and linkAudio;
To filter the audios by their categories, you don't need to do a custom filter, you can simply do a deep array filter inside it, like this:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter: { categories: search }">
Here's a snippet working:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope, $sce) {
var audioItems = document.getElementsByClassName("audio");
$scope.play = function(locatie) {
var audio = audioItems[locatie.id];
if (!audio.paused) {
audio.pause();
} else {
audio.play();
}
}
$scope.data = [
{
"id":0,
"categories":[
"Rectorat",
"General",
"Secretariate"
],
"denumire":"Rectorat",
"imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
"linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
"descriereText":"Bd. Mamaia nr. 124, etaj 1...",
"linkHarta":""
},
{
"id":1,
"categories":[
"Juridic",
"General",
"Secretariate"
],
"denumire":"Juridic",
"imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
"linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
"descriereText":"Bd. Mamaia nr. 124, etaj 1...",
"linkHarta":""
},
{
"id":2,
"categories":[
"Facultatea de Matematica si Informatica",
"Secretariate"
],
"denumire":"Secretariat Facultatea de Matematica si Informatica",
"imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
"linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
"descriereText":"indicatii",
"linkHarta":""
},
{
"id":3,
"categories":[
"Facultatea de Matematica si Informatica",
"Secretariate"
],
"denumire":"Secretariat Facultatea de Matematica si Informatica",
"imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
"linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
"descriereText":"indicatii",
"linkHarta":""
}
];
// You can use map to set all your url items to be trusted, as follows:
$scope.data.map(function(value) {
value.imagine = $sce.trustAsResourceUrl(value.imagine);
value.linkAudio = $sce.trustAsResourceUrl(value.linkAudio);
})
});
})();
.col-xs-12 {
padding-bottom: 10px;
}
.col-sm-6 {
padding-bottom: 10px;
}
.centrat {
margin: auto;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-cloak ng-controller="mainCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://a5.mzstatic.com/us/r30/Purple/v4/8d/42/72/8d427222-6310-a43f-5d79-13c3a24c0ce5/icon128-2x.png" class="centrat img-responsive">
</div>
</div>
<div class="row">
<div class="col-lg-12" style="padding-bottom: 20px;">
<input type="textarea" class="form-control" ng-model="search" placeholder="Filter" style="width: 100%; height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter: { categories: search }">
<div>
<img class="img-responsive" ng-src="{{locatie.imagine}}" ng-click="play(locatie)">
<audio class="audio" ng-src="{{locatie.linkAudio}}"></audio>
<p style="font-size: 10px;" ng-bind="locatie.denumire + ' | ' + locatie.descriereText">
</div>
</div>
</div>
</div>
</body>
</html>
Related
I just need ** only data and title must be increase their font size** when I changed the switch statement but i dont want to increase size of font size of right corner how can i do that
<!DOCTYPE html>
<html ng-app="myApp">
<head>
***emphasized text***
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="angular-gridster.min.css"></link>
<link rel="stylesheet" href="wid.css"></link>
</head>
<body ng-controller="myController" >
<div gridster ng-controller="myCtrl" >
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget ></div>
</li>
</ul>
</div>
<select ng-model="fontStyle" ng-change="style()">
<option value="larger">larger</option>
<option value="middle">middle</option>
<option value="small">small</option>
</select>
</body>
</html>
my script goes here which contains the controller as well as directive.
var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){
$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj:{data:54565463,right:67566,title:'Headers'}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:65476756,right:12344,title:"Income"}}]
$scope.style = function() {
style = $scope.fontStyle;
switch (style) {
case 'larger':
$scope.myStyle = {
"font-size": "2.3em",
}
break;
case 'middle':
$scope.myStyle = {
"font-size": "2.0em"
}
break;
case 'small':
$scope.myStyle = {
"font-size": "1.3em",
}
break;
default:
alert('/#larger');
}
}
});
app.directive('myWidget',function(){
return{
restrict:"EA",
scope:{
title:'#',
data:'=',
},
templateUrl:'spare.html',
}
});
and my spare html is below -
<span ng-controller="myController" >
<div class="panel-body" >
<h1 class="title" >{{data.title}}</h1>
<i class="fa fa-dollar"></i>{{data.data}}
</h1></div>
<p id="rightcorner"><i class="fa fa-level-up"></i>{{data.right}}
</p>
</span>
Use ng-style for elements that you want assign style dynamically.
See documentation for details and examples.
If you want to add style which is stored in $scope.myStyle it goes like that:
<div ng-style="myStyle">...</div>
Complete example:
HTML:
<div ng-app="app" ng-controller="myController">
myStyle current value: {{myStyle}}
<div ng-style="myStyle">
element with style
</div>
<button ng-click=changeStyle()>
Change style
</button>
</div>
JS:
angular.module("app", []).controller("myController", function($scope) {
$scope.myStyle = {
color: 'red'
};
$scope.changeStyle = function() {
$scope.myStyle = {
color: 'blue'
};
}
});
Working jsfiddle
I'm asking if is possible to do something as that in angular
<div ng-app="app">
<div ng-controller="mainController">
<ul ng-repeat="movie in movies |searchFilter:Filter.genre | searchFilter:Filter.name |searchFilter:Filter.pic ">
<li>{{movie.name}}</li>
</ul>
<h2>genre</h2>
<div>
<label>Comedy </label><input type="checkbox" ng-model="Filter.genre.Comedy" ng-true-value="Comedy" data-ng-false-value=''/><br/>
</div>
<h2>PIC</h2>
<label>aa</label><input type="checkbox" ng-model="Filter.pic.aa" ng-true-value="ciao" data-ng-false-value=''/><br/>
<h2>Name</h2>
<label>Shrek</label><input type="checkbox" ng-model="Filter.name.Shrek" ng-true-value="The God" data-ng-false-value=''/><br/>
</div>
</div>
i'm creating a checkbox for filter on different fields (size,name,genre)
ill have a list of avaible sizes,names and genres .
The issue is on ng-model and i tried to write it as "Filter.genre.genre.name" or
"Filter["genre"+genre.name]" and also "Filter.genre[genre.name]" but still not work .
the js.file is
var app =angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.movies = [{name:'Shrek', genre:'Comedy',pic:"cc"},
{name:'Die Hard', genre:'Comedy',pic:"aa"},
{name:'The Godfather', genre:'Drama',pic:"ciao"},
{name:'The Godher', genre:'Comedy',pic:"lel"}];
$scope.genres = [{name:"Comedy"},{name:"Action"},{name:"Drama"}];
});
app.filter('searchFilter',function($filter) {
return function(items,searchfilter) {
var isSearchFilterEmpty = true;
//searchfilter darf nicht leer sein
angular.forEach(searchfilter, function(searchstring) {
if(searchstring !=null && searchstring !=""){
isSearchFilterEmpty= false;
}
});
if(!isSearchFilterEmpty){
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term,key) {
if(term != null && !isFound){
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
result.push(item);
isFound = true;
// console.log(key,term);
}
});
}
});
});
return result;
}else{
return items;
}
}
});
if i make 3 different labels for the field Comedy, Action and Drama with ng-models called as
ng-model="Filter.genre.Comedy" ; ng-model="Filter.genre.Action" and ng-model="Filter.genre.Drama"
it work but it doesnt work if i try to write it into ng-repeat . I hope to have been clearer
In this sample i try to handle your question by change the Model of your page.
we have:
list of movies array => $scope.movies = []
dynamic filters array => $scope.genres = [], $scope.years = [] or more
our target:
Create a dynamic filters to search in movies
what we do
$scope.filterHandler = function (key, value) {}
Run when user start searching on input or select, this function help us to create a filter as object by sending key and value which result is {key:value}
$scope.searchTypeHandler = function (type, dependTo) {}
Run when our filters has some array for example genre has genres as dropdown select, this function help us to return the array which depend to the filter.
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
//your options
$scope.movies = [{
name: 'Shrek',
genre: 'Comedy',
year: 2000
},
{
name: 'Die Hard',
genre: 'Action',
year: 2000
},
{
name: 'The Godfather',
genre: 'Drama',
year: 2015
},
{
name: 'The Godher',
genre: 'Comedy',
year: 2017
}
];
$scope.genres = [{
name: "Comedy"
},
{
name: "Action"
},
{
name: "Drama"
}
];
$scope.years = [{
name: 2000
},
{
name: 2015
},
{
name: 2017
}
];
//
$scope.filter = {}
$scope.filterHandler = function(key, value) {
var object = {};
object[key] = value;
$scope.filter["find"] = object;
};
$scope.searchTypeHandler = function(type, dependTo) {
$scope.filter = {};
$scope.filter.searchType = type;
$scope.filter.options = undefined;
if (dependTo != null) {
$scope.filter.options = $scope[dependTo];
}
};
//default
$scope.searchTypeHandler("name");
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container" ng-app="app" ng-controller="ctrl">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4>Movies</h4>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
By {{filter.searchType}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left">
<li><a ng-click="searchTypeHandler('genre', 'genres')">Filter By Genre</a></li>
<li><a ng-click="searchTypeHandler('name', null)">Filter By Name</a></li>
<li><a ng-click="searchTypeHandler('year', 'years')">Filter By Year</a></li>
</ul>
</div>
<input ng-hide="filter.options" type="text" class="form-control" ng-model="filter.query" ng-change="filterHandler(filter.searchType, filter.query)">
<select ng-show="filter.options" class="form-control" ng-model="filter.option" ng-change="filterHandler(filter.searchType, filter.option)" ng-options="option.name as option.name for option in filter.options"></select>
</div>
<!-- /input-group -->
</div>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="movie in movies | filter: filter.find">
{{movie.name}} - <label class="label label-info">Ggenre: {{movie.genre}}</label> - <label class="label label-default">Year: {{movie.year}}</label>
</li>
</ul>
</div>
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 am new to angular js. I am trying to build a web apps with Angular and Rails from thinkster. I have made a index page on which i had load the home template, home template carries two field i.e title and link of the post and a submit button. On submitting the title and link is added to an array and displays it on the home page. Now i have added another another template that is post, in which their is facility to comment on a particular post but after including the post template and controller my app is not running. Help me in solving the problem.
index.html file contain :
<html>
<head>
<title>Flapper News</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="angular-ui-router.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view> </ui-view>
</div>
</div>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
<form ng-submit="addComment()"
style="margin-top:30px;">
<h3>Add a new comment</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Comment"
ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1> Flapper News </h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body
app.js contain :
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', link: 'link1',upvotes: 5},
{title: 'post 2', link: 'link2',upvotes: 2},
{title: 'post 3', link: 'link3',upvotes: 15},
{title: 'post 4', link: 'link4',upvotes: 9},
{title: 'post 5', link: 'link5',upvotes: 4}
]
};
return o;
}])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
.controller('MainCtrl', [ '$scope', 'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost= function(){
if(!$scope.title || $scope.title === '') { alert("Field can't left blank"); return; }
$scope.posts.push({
title: $scope.title ,
link: $scope.link,
upvotes: 0,
comments: [
{ author: 'Joe', body: 'Cool post!', upvotes: 0 },
{ author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0 }
]
});
$scope.title='';
$scope.link='';
};
$scope.incrementUpvotes= function(post){
post.upvotes += 1;
};
}]);
Any idea what i am doing wrong?
`
Try below app.js. I have removed the semicolon.
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', link: 'link1',upvotes: 5},
{title: 'post 2', link: 'link2',upvotes: 2},
{title: 'post 3', link: 'link3',upvotes: 15},
{title: 'post 4', link: 'link4',upvotes: 9},
{title: 'post 5', link: 'link5',upvotes: 4}
]
};
return o;
}])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}])
.controller('MainCtrl', [ '$scope', 'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost= function(){
if(!$scope.title || $scope.title === '') { alert("Field can't left blank"); return; }
$scope.posts.push({
title: $scope.title ,
link: $scope.link,
upvotes: 0,
comments: [
{ author: 'Joe', body: 'Cool post!', upvotes: 0 },
{ author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0 }
]
});
$scope.title='';
$scope.link='';
};
$scope.incrementUpvotes= function(post){
post.upvotes += 1;
};
}]);
<!DOCTYPE html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body ng-app = "mainApp">
<h2>AngularJS Sample Application</h2>
<div ng-controller = "studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<div ng-controller="employeeController">
<table>
<tr>
<th>EmpName</th>
<th>EmpID</th>
<th>Salary</th>
</tr>
<tr ng-repeat = "employee in employees">
<td>{{ employee.EmpName }}</td>
<td>{{ employee.EmpID }}</td>
<td>{{ employee.Salary }}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope,$http) {
var url = "data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
});
mainApp.controller('employeeController', function($scope,$http) {
var url1 = "empdata.txt";
$http.get(url1).success( function(response1) {
$scope.employees = response1;
});
});
</script>
</body>
</html>
<make a file with data like below data.txt>
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
<make a file with data like below empdata.txt>
[
{
"EmpName" : "Mahesh Parashar",
"EmpID" : 101,
"Salary" : "80000"
},
{
"EmpName" : "Dinkar Kad",
"EmpID" : 201,
"Salary" : "70000"
},
{
"EmpName" : "Robert",
"EmpID" : 191,
"Salary" : "75000"
},
{
"EmpName" : "Julian Joe",
"EmpID" : 111,
"Salary" : "77000"
}
]
I have the dropdown as demonstrated below. All of this work. I just need to set default value for each one. I know how to do it for the upper level but how to do it for the next levels?
This is my html code:
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in books.selectedChapters" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in books.selectedTitles" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
</div>
</body>
</html>
and this is my javascript code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.books=[
{
id:1,
bookName:'C++',
chapter:[
{chapterName:'Introduction',titles:['About Author','C++ Basic']},
{chapterName:'OOPS basic',titles:['Class','Object','Data Encapsulation','Inheritance','Interface']},
]
},
{
id:2,
bookName:'Java',
chapter:[
{chapterName:'Java Introduction',titles:['About Author','Java Intro']},
{chapterName:'Java basic',titles:['Variables','Function','Function Overloading','Class','Object']},
]
},
{
id:3,
bookName:'Angular JS',
chapter:[
{chapterName:'Introduction',titles:['MVC','Model','View','Controller']},
{chapterName:'Key Features',titles:['Template','Scope','Expressions','Filter','Controller','Module']},
]
}
];
$scope.onBookChange=function(b,book){
//alert("inside");
b.selectedChapters=book.chapter;
}
$scope.onChapterChange=function(b,cha){
//alert("inside");
// console.log(cha);
b.selectedChapter=cha;
b.selectedTitles=cha.titles;
}
$scope.onTitleChange=function(b,t){
// alert(t);
b.selectedTitle=t;
}
});
Please see demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope) {
$scope.books = [
{
id: 1,
bookName: 'C++',
chapter: [{
chapterName: 'Introduction',
titles: ['About Author', 'C++ Basic']
}, {
chapterName: 'OOPS basic',
titles: ['Class', 'Object', 'Data Encapsulation', 'Inheritance', 'Interface']
},
]
}, {
id: 2,
bookName: 'Java',
chapter: [{
chapterName: 'Java Introduction',
titles: ['About Author', 'Java Intro']
}, {
chapterName: 'Java basic',
titles: ['Variables', 'Function', 'Function Overloading', 'Class', 'Object']
},
]
}, {
id: 3,
bookName: 'Angular JS',
chapter: [{
chapterName: 'Introduction',
titles: ['MVC', 'Model', 'View', 'Controller']
}, {
chapterName: 'Key Features',
titles: ['Template', 'Scope', 'Expressions', 'Filter', 'Controller', 'Module']
},
]
}
];
$scope.onBookChange = function(b, book) {
//set default chapter
$scope.chapter = book.chapter[0];
//set default title
$scope.title = $scope.chapter.titles[0];
}
$scope.onChapterChange = function(b, chapter) {
$scope.title = chapter.titles[0];
}
$scope.onTitleChange = function(b, t) {
// alert(t);
b.selectedTitle = t;
}
});
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="homeCtrl">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control">
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in book.chapter" class="form-control">
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in chapter.titles" class="form-control">
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
</div>
</body>
you have your ng-models set to book, chapter, title. You just need to assign the default values to these on the scope
$scope.book = $scope.books[0];
//in the onBookChange function
$scope.chapter = book.chapter;
//in the onChapterChange function
$scope.title = cha.titles[0];