I had created a angular audio app. i want to display play list in it . Using directive to trigger play pause and other operations. Please help me to create play list here.
my main html is
<!DOCTYPE html>
<html ng-app="app">
<head>
<title> AUDIO</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/ng-cool-audio.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="js/ng-cool-audio.js"></script>
<script src="js/app.js"></script>
<style>
body {
background-color: #f5f5f5;
font-family: Helvetica Neue, Helvetica, arial, sans-serif;
}
.main {
width: 800px;
margin: 100px auto;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="main">
<ng-cool-audio source="source2"></ng-cool-audio>
</div>
</body>
</html>
my html template is
<div class="ng-cool-audio-container">
<audio>
Your browser seems to be upgraded! :)
</audio>
<div class="ng-cool-audio-preview">
<div class="ncv-audio-left">
<div class="ncv-img-container">
<img ng-src="{{audio.cover}}" alt="Photo">
</div>
</div>
<div class="ncv-audio-right">
<div class="ncv-audio-right-top">
<div class="ncv-header">
<div class="ncv-header-title">{{audio.author}}</div>
<div class="ncv-header-subtitle">{{audio.name}}</div>
<div class="ncv-audio-sound">
<i class="fa fa-volume-up" ng-show="!isMuted" ng-click="volumeOff()"></i>
<i class="fa fa-volume-off" ng-show="isMuted" ng-click="volumeOn()"></i>
<input type="range" max="10" min="0" value="5">
</div>
</div>
</div>
<div class="ncv-audio-right-bottom">
<div class="ncv-audio-controls">
<i class="fa fa-backward" ng-click="playBackward()"></i>
<i class="fa fa-play" ng-click="play()"></i>
<i class="fa fa-pause" ng-click="pause()"></i>
<i class="fa fa-forward" ng-click="playForward()"></i>
</div>
<div class="ncv-progress">
<progress class="ncv-progress-bar" max="100" value="{{progressValue}}"></progress>
</div>
<div class="ncv-time">
<span class="ncv-current-time">{{currentTime}}</span>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<h4> PLAY LIST </h4>
<div class="col-lg-3" ng-repeat="song in source2">
{{song.audio.name}}
</div>
</div>
</div>
app.js is
(function() {
'use strict';
angular
.module('app', [
'ngCoolAudio'
])
.controller('MainCtrl', function($scope) {
$scope.source2 = {
audio: [{
author: 'Dr. SPB',
cover: 'images/about.jpg',
src: 'audio/AADI ANAADI-SPB.mp3',
name: 'AADI ANAADI'
},
{
author: 'Dr.RAJ',
cover: 'images/about.jpg',
src: 'audio/BHAVA SAAGARADA AALADI-DR.RAJ.mp3',
name: 'BHAVA SAAGARADA AALADI'
},
{
author: 'Dr.RAJ',
cover: 'images/about.jpg',
src: 'audio/CHARAKULAAMBUDHI CHANDIRA-DR.RAJ (2).mp3',
name: 'CHARAKULAAMBUDHI CHANDIRA'
},
{
author: 'S.JANAKI',
cover: 'images/about.jpg',
src: 'audio/DHYANA MAADUTHIRU-S.JANAKI .mp3',
name: 'DHYANA MAADUTHIRU'
},
{
author: 'OM',
cover: 'images/about.jpg',
src: 'audio/Om Namahshivaya.mp3',
name: 'OM NAMAHSHIVAYA'
}
],
config: {
autoplay: false,
loop: true
}
}
})
})();
audio directive is
(function() {
'use strict';
angular
.module('ngCoolAudio', [])
.directive('ngCoolAudio', [
'$timeout',
'$sce',
function($timeout, $sce) {
return {
restrict: 'AE',
scope: {
source: '=source'
},
replace: true,
templateUrl: 'html/audio.html',
controller: ['$scope', '$element', function($scope, $element) {
//check source file
if (!$scope.source || !$scope.source.audio) {
throw new Error('Source seems not to config right!');
return;
}
var container = $element[0].querySelector('.ng-cool-audio-container');
var audio = $element[0].querySelector('audio');
var volume_range = $element[0].querySelector('.ncv-audio-sound input[type="range"]');
var $audio = angular.element(audio);
$scope.audio = {};
//private method
var calCulateTime = function() {
var secs = parseInt(audio.currentTime % 60);
var mins = parseInt((audio.currentTime / 60) % 60);
// Ensure it's two digits. For example, 03 rather than 3.
secs = ("0" + secs).slice(-2);
mins = ("0" + mins).slice(-2);
return mins + ':' + secs;
}
var calCulateProgress = function() {
var percent = (100 / audio.duration) * audio.currentTime;
return percent;
}
var generateAudio = function(audio) {
if (!audio.src) {
throw new Error('Not found src in your audio config');
return;
}
$audio.attr('src', audio.src);
$scope.audio.cover = audio.cover || 'http://7xj610.com1.z0.glb.clouddn.com/29ce98b4349b72c2778d2f82823159b06f98f8bc.jpeg';
$scope.audio.author = audio.author || 'Unknow';
$scope.audio.name = audio.name || 'Unknow';
}
$scope.currentTrack = 0;
$scope.jumpInterval = 10;
$scope.init = function() {
$scope.currentTime = '00:00';
$scope.progressValue = 0;
$scope.isPlaying = false;
$scope.isMuted = false;
$scope.setInterface($scope.currentTrack);
$scope.addEvents();
};
$scope.setInterface = function(index) {
var isArray = angular.isArray($scope.source.audio);
if (isArray) {
$scope.audioCollection = $scope.source.audio;
generateAudio($scope.audioCollection[index]);
} else {
generateAudio($scope.source.audio);
}
if ($scope.source.config) {
if ($scope.source.config.autoplay) {
$audio.attr('autoplay', 'autoplay');
$scope.play();
}
if ($scope.source.config.loop) {
$audio.attr('loop', 'loop');
}
}
};
//toggle play pause
$scope.play = function() {
audio.play();
$scope.isPlaying = true;
};
$scope.pause = function() {
audio.pause();
$scope.isPlaying = false;
};
//toggle mute
$scope.volumeOn = function() {
audio.muted = false;
$scope.isMuted = false;
};
$scope.volumeOff = function() {
audio.muted = true;
$scope.isMuted = true;
};
//backward forward
$scope.playBackward = function() {
//here jump to pre song
if ($scope.audioCollection && $scope.audioCollection.length > 0) {
$scope.currentTrack -= 1;
if ($scope.currentTrack < 0) {
$scope.currentTrack = $scope.audioCollection.length - 1;
}
$scope.init();
$scope.play();
} else {
var toTime = audio.currentTime - $scope.jumpInterval;
if (toTime < 0) {
audio.currentTime = 0;
} else {
audio.currentTime = toTime;
}
$scope.currentTime = calCulateTime();
$scope.progressValue = calCulateProgress();
}
};
$scope.playForward = function() {
//here jump to next song
if ($scope.audioCollection && $scope.audioCollection.length > 0) {
$scope.currentTrack += 1;
if ($scope.currentTrack > $scope.audioCollection.length - 1) {
$scope.currentTrack = 0;
}
$scope.init();
$scope.play();
} else {
var toTime = audio.currentTime + $scope.jumpInterval;
if (toTime > audio.duration) {
audio.currentTime = audio.duration;
} else {
audio.currentTime = toTime;
}
$scope.currentTime = calCulateTime();
$scope.progressValue = calCulateProgress();
}
};
//skip progress
$scope.skipProgress = function(e) {
//update time and progress
var target = e.target;
var offsetX = 0;
if (!e.pageX || !target.offsetLeft) {
offsetX = e.offsetX ? e.offsetX : e.layerX;
} else {
offsetX = e.pageX - target.offsetLeft;
}
var pos = offsetX / target.offsetWidth;
audio.currentTime = pos * audio.duration;
$scope.currentTime = calCulateTime();
$scope.progressValue = calCulateProgress();
}
$scope.addEvents = function() {
//time update
// progress update
audio.addEventListener('timeupdate', function() {
$scope.currentTime = calCulateTime();
$scope.progressValue = calCulateProgress();
$scope.$apply();
}, false);
audio.addEventListener('ended', function() {
//auto play next
if ($scope.audioCollection && $scope.audioCollection.length > 0) {
$scope.playForward();
}
});
//angular seems dont support input[range] stuff so let's do it event
volume_range.addEventListener('change', function() {
audio.volume = parseFloat(this.value / 10);
}, false);
}
}],
link: function(scope, ele, attrs) {
scope.init();
}
}
}
])
})();
Related
I have the problem, because datatable is empty, data doesn't binding.
html:
<div id="usersFormDiv" ng-controller="adminController">
<div webix-ui="usersGrid"></div>
</div>
controller
$scope.usersGrid ={
view:"datatable",
id:"usersGridWebix",
autoConfig:true,
select:"row",
data : [
{ id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
],
columns:[
{ header:"Lp", id:"lp", width:50},
{ header:"Imię", id:"name", width:50},
{ header:"Nazwisko", id:"surname", width:100},
{ header:"Email", id:"email", width:150},
{ header:"Organ", id:"organ", width:100},
{ header:"Lokalizacja", id:"location", width:150}
]
// url: "./app/model/users.json"
};
with webix-ui attribute in div use webix-data="data"
also put
$scope.data = { id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
I have the same problem, i fixed using this way, for more details refer:-
http://docs.webix.com/desktop__angular.html
You can define the data table structure either on html or within controller as well.
if (window.angular)
(function() {
function id_helper($element) {
//we need uniq id as reference
var id = $element.attr("id");
if (!id) {
id = webix.uid();
$element.attr("id", id);
}
return id;
}
function locate_view_id($element) {
if (typeof $element.attr("webix-ui") != "undefined")
return $element.attr("id");
return locate_view_id($element.parent());
}
//creates webix ui components
angular.module("webix", [])
.directive('webixUi', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var dataname = $attrs["webixUi"];
var callback = $attrs["webixReady"];
var watch = $attrs["webixWatch"];
var wxRoot = null;
var id = id_helper($element);
$element.ready(function() {
if (wxRoot) return;
if (callback)
callback = $parse(callback);
//destruct components
$element.bind('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//ensure that ui is destroyed on scope destruction
$scope.$on('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//webix-ui attribute has some value - will try to use it as configuration
if (dataname) {
//configuration
var watcher = function(data) {
if (wxRoot) wxRoot.destructor();
if ($scope[dataname]) {
var config = webix.copy($scope[dataname]);
config.$scope = $scope;
$element[0].innerHTML = "";
wxRoot = webix.ui(config, $element[0]);
if (callback)
callback($scope, {
root: wxRoot
});
}
};
if (watch !== "false")
$scope.$watch(dataname, watcher);
watcher();
} else {
//if webix-ui is empty - init inner content as webix markup
if (!$attrs["view"])
$element.attr("view", "rows");
var ui = webix.markup;
var tmp_a = ui.attribute;
ui.attribute = "";
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
if (typeof $attrs["webixRefresh"] != "undefined")
wxRoot = ui.init($element[0], $element[0], $scope);
else
wxRoot = ui.init($element[0], null, $scope);
ui.attribute = tmp_a;
if (callback)
callback($scope, {
root: wxRoot
});
}
//size of ui
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
if (wxRoot) wxRoot.adjust();
});
});
}
};
}])
.directive('webixShow', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var attr = $parse($attrs["webixShow"]);
var id = id_helper($element);
if (!attr($scope))
$element.attr("hidden", "true");
$scope.$watch($attrs["webixShow"], function() {
var view = webix.$$(id);
if (view) {
if (attr($scope)) {
webix.$$(id).show();
$element[0].removeAttribute("hidden");
} else
webix.$$(id).hide();
}
});
}
};
}])
.directive('webixEvent', ["$parse", function($parse) {
var wrap_helper = function($scope, view, eventobj) {
var ev = eventobj.split("=");
var action = $parse(ev[1]);
var name = ev[0].trim();
view.attachEvent(name, function() {
return action($scope, {
id: arguments[0],
details: arguments
});
});
};
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var events = $attrs["webixEvent"].split(";");
var id = id_helper($element);
setTimeout(function() {
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
for (var i = 0; i < events.length; i++) {
wrap_helper($scope, view, events[i]);
}
});
}
};
}])
.directive('webixElements', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixElements"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
setTimeout(function() {
var view = webix.$$(id);
if (view) {
view.define("elements", collection);
view.refresh();
}
}, 1);
});
}
};
}])
.directive('webixData', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixData"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
if (collection) {
setTimeout(function() {
loadData($element, id, collection, 0);
}, 1);
}
});
}
};
}]);
function loadData($element, id, collection, num) {
if (num > 10) return;
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
if (view) {
if (view.options_setter) {
view.define("options", collection);
view.refresh();
} else {
if (view.clearAll)
view.clearAll();
view.parse(collection);
}
} else {
webix.delay(loadData, this, [$element, id, collection], 100, num + 1);
}
}
})();
{
"student": [ {
"firstName": "Ajinkya", "lastName": "Chanshetty", "contact": 9960282703, "email": "aajinkya#hotmail.com"
}
,
{
"firstName": "Sandip", "lastName": "Pal", "contact": 9960282703, "email": "sandip#hotmail.com"
}
,
{
"firstName": "Neha", "lastName": "Sathawane", "contact": 99608882703, "email": "neha#hotmail.com"
}
,
{
"firstName": "Gopal", "lastName": "Thakur", "contact": 9960000703, "email": "gopal#hotmail.com"
}
]
}
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Layouts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
var app = angular.module('webixApp', ["webix"]);
app.controller('jsonCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.content = response.data.student
})
})
app.controller('extCtrl', function($scope, $http) {
$scope.myTable = {
view: "datatable",
columns: [{
id: "name",
header: "Name",
css: "rank",
width: 150
},
{
id: "username",
header: "UserName",
width: 150,
sort: "server"
},
{
id: "email",
header: "Email ID",
width: 200,
sort: "server"
},
{
id: "website",
header: "Website",
width: 150
}
],
autoheight: true,
autowidth: true,
url: "https://jsonplaceholder.typicode.com/users"
}
})
</script>
</head>
<body>
<div webix-ui type="space">
<div height="35">Welcome to Angular Webix App </div>
<div view="cols" type="wide" margin="10">
<div width="200">
<input type="text" placeholder="Type something here" ng-model="app"> Hello {{app}}!
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="jsonCtrl">
<div header="JSON Data Fetch Example">
<div ng-controller="jsonCtrl">
<div webix-ui view="datatable" webix-data="content" autoheight="true" select="row" fillspace="true">
<div autowidth="true" view="column" id="firstName" sort="int" css="rating" scrollY="true">First Name</div>
<div view="column" id="lastName" sort="int">Last Name</div>
<div view="column" id="contact" sort="int">Contact</div>
<div view="column" id="email" sort="string" width="200">E mail</div>
</div>
</div>
</div>
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="extCtrl">
<div header="External Source Data Table">
<div webix-ui="myTable"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a problem with angularsJs, I have a dropdown-multiselect which contain a checkbox button with labels, when I click check, the label is addded in the table,
now, I want to delete a row in the table, so I have to click (supprimer) button (in the table) and I need in the same time that the check will be uncheked and I don't know how to proceed
Please some one could help me please
this is my popup.html page :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.0/lodash.min.js"></script>
<script src="js/MyApp.js"></script>
<link href="font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body >
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-dropdown-multiselect="" options="example14data" selected-model="example14model" checkboxes="true" extra-settings="example14settings"></div>
<form class="form-inline" role="form" style="margin-left: 300px;">
<div class="form-group">
<input type="text" size="30" placeholder=" other subject" class="form-control" ng-model="otherSubject" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="ajouteSubject(otherSubject)" >Ajouter</button>
<button ng-click="supprimer()"> <a><i class="fa fa-remove" ng-click="supprimer()"></i></a>supprimer</button>
</div>
</form><br>
<table class="table table-responsive table-bordered" style="width:400px; margin-left: 300px;">
<thead>
<tr>
<th>Subject Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pref in example14model">
<td>{{pref.label}}</td>
<td> <input type="checkbox" ng-model="pref.isDelete"/> {{$index}}</td>
</tr>
</tbody>
</table>
<br><br>
<pre>Selected Subject: {{example14model}} | </pre>
</div>
</body>
</html>
and My controller myApp.js
'use strict';
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('AppCtrl', function ($scope) {
$scope.example14model = [];
$scope.example14settings = {
scrollableWidth: '400px',
scrollableHeight: '200px',
scrollable: true,
enableSearch: true
};
$scope.example14data = [
{ "label": "JAVA", "id": "1" },
{ "label": "C++", "id": "2" },
{ "label": "JSON", "id": "3" },
{ "label": "DotNet", "id": "4"},
{"label": "AKKA", "id": "5"}
];
$scope.example2settings = {
displayProp: 'label'
};
$scope.ajouteSubject = function (otherSubject) {
$scope.example14data.push({
label: otherSubject,
checked: false
})
};
$scope.supprimer= function (){
var example14dataNew= [];
angulars.forEach($scope.example14data, function(v){
if (!v.isDelete){
example14dataNew.push(v);
}
$scope.example14data= example14dataNew;
} )
};
$scope.sessions = [{
id: 0
}];
});
var directiveModule = angular.module('angularjs-dropdown-multiselect', []);
directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse',
function ($filter, $document, $compile, $parse) {
return {
restrict: 'AE',
scope: {
selectedModel: '=',
options: '=',
extraSettings: '=',
events: '=',
searchFilter: '=?',
translationTexts: '=',
groupBy: '#'
},
template: function (element, attrs) {
var checkboxes = attrs.checkboxes ? true : false;
var groups = attrs.groupBy ? true : false;
var template = '<div class="multiselect-parent btn-group dropdown-multiselect" style="width: 300px">';
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}} <span class="caret"></span></button>';
template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: scroll" >';
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()"><i class="fa fa-check"></i> {{texts.checkAll}}</a>';
template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();"><i class="fa fa-remove"></i> {{texts.uncheckAll}}</a></li>';
template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
template += '<li ng-show="settings.enableSearch" class="divider"></li>';
if (groups) {
template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
template += '<li ng-repeat-end role="presentation">';
} else {
template += '<li role="presentation" ng-repeat="option in options | filter: searchFilter">';
}
template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
if (checkboxes) {
template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a>';
} else {
template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp)}}</a>';
}
template += '</li>';
template += '<li class="divider" ng-show="settings.selectionLimit > 1"></li>';
template += '<li role="presentation" ng-show="settings.selectionLimit > 1"><a role="menuitem">{{selectedModel.length}} {{texts.selectionOf}} {{settings.selectionLimit}} {{texts.selectionCount}}</a></li>';
template += '</ul>';
template += '</div>';
element.html(template);
},
link: function ($scope, $element, $attrs) {
var $dropdownTrigger = $element.children()[0];
$scope.toggleDropdown = function () {
$scope.open = !$scope.open;
};
$scope.checkboxClick = function ($event, label) {
$scope.setSelectedItem(label);
$event.stopImmediatePropagation();
};
$scope.externalEvents = {
onItemSelect: angular.noop,
onItemDeselect: angular.noop,
onSelectAll: angular.noop,
onDeselectAll: angular.noop,
onInitDone: angular.noop,
onMaxSelectionReached: angular.noop
};
$scope.settings = {
dynamicTitle: true,
scrollable: false,
scrollableWidth: '300px',
scrollableHeight: '300px',
closeOnBlur: true,
displayProp: 'label',
idProp: 'label',
externalIdProp: 'label',
enableSearch: false,
selectionLimit: 0,
showCheckAll: true,
showUncheckAll: true,
closeOnSelect: false,
buttonClasses: 'btn btn-default',
closeOnDeselect: false,
groupBy: $attrs.groupBy || undefined,
groupByTextProvider: null,
smartButtonMaxItems: 0,
smartButtonTextConverter: angular.noop
};
$scope.texts = {
checkAll: 'Check All',
uncheckAll: 'Uncheck All',
selectionCount: 'checked',
selectionOf: '/',
searchPlaceholder: 'Search...',
buttonDefaultText: 'Select a subject',
dynamicButtonTextSuffix: 'checked'
};
$scope.searchFilter = $scope.searchFilter || '';
if (angular.isDefined($scope.settings.groupBy)) {
$scope.$watch('options', function (newValue) {
if (angular.isDefined(newValue)) {
$scope.orderedItems = $filter('orderBy')(newValue, $scope.settings.groupBy);
}
});
}
angular.extend($scope.settings, $scope.extraSettings || []);
angular.extend($scope.externalEvents, $scope.events || []);
angular.extend($scope.texts, $scope.translationTexts);
$scope.singleSelection = $scope.settings.selectionLimit === 1;
function getFindObj(label) {
var findObj = {};
if ($scope.settings.externalIdProp === '') {
findObj[$scope.settings.idProp] = label;
} else {
findObj[$scope.settings.externalIdProp] = label;
}
return findObj;
}
function clearObject(object) {
for (var prop in object) {
delete object[prop];
}
}
if ($scope.singleSelection) {
if (angular.isArray($scope.selectedModel) && $scope.selectedModel.length === 0) {
clearObject($scope.selectedModel);
}
}
if ($scope.settings.closeOnBlur) {
$document.on('click', function (e) {
var target = e.target.parentElement;
var parentFound = false;
while (angular.isDefined(target) && target !== null && !parentFound) {
if (_.contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
if (target === $dropdownTrigger) {
parentFound = true;
}
}
target = target.parentElement;
}
if (!parentFound) {
$scope.$apply(function () {
$scope.open = false;
});
}
});
}
$scope.getGroupTitle = function (groupValue) {
if ($scope.settings.groupByTextProvider !== null) {
return $scope.settings.groupByTextProvider(groupValue);
}
return groupValue;
};
$scope.getButtonText = function () {
if ($scope.settings.dynamicTitle && ($scope.selectedModel.length > 0 || (angular.isObject($scope.selectedModel) && _.keys($scope.selectedModel).length > 0))) {
if ($scope.settings.smartButtonMaxItems > 0) {
var itemsText = [];
angular.forEach($scope.options, function (optionItem) {
if ($scope.isChecked($scope.getPropertyForObject(optionItem, $scope.settings.idProp))) {
var displayText = $scope.getPropertyForObject(optionItem, $scope.settings.displayProp);
var converterResponse = $scope.settings.smartButtonTextConverter(displayText, optionItem);
itemsText.push(converterResponse ? converterResponse : displayText);
}
});
if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) {
itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems);
itemsText.push('...');
}
return itemsText.join(', ');
} else {
var totalSelected;
if ($scope.singleSelection) {
totalSelected = ($scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp])) ? 1 : 0;
} else {
totalSelected = angular.isDefined($scope.selectedModel) ? $scope.selectedModel.length : 0;
}
if (totalSelected === 0) {
return $scope.texts.buttonDefaultText;
} else {
return totalSelected + ' ' + $scope.texts.dynamicButtonTextSuffix;
}
}
} else {
return $scope.texts.buttonDefaultText;
}
};
$scope.getPropertyForObject = function (object, property) {
if (angular.isDefined(object) && object.hasOwnProperty(property)) {
return object[property];
}
return '';
};
$scope.selectAll = function () {
$scope.deselectAll(false);
$scope.externalEvents.onSelectAll();
angular.forEach($scope.options, function (value) {
$scope.setSelectedItem(value[$scope.settings.idProp], true);
});
};
$scope.deselectAll = function (sendEvent) {
sendEvent = sendEvent || true;
if (sendEvent) {
$scope.externalEvents.onDeselectAll();
}
if ($scope.singleSelection) {
clearObject($scope.selectedModel);
} else {
$scope.selectedModel.splice(0, $scope.selectedModel.length);
}
};
$scope.setSelectedItem = function (label, dontRemove) {
var findObj = getFindObj(label);
var finalObj = null;
if ($scope.settings.externalIdProp === '') {
finalObj = _.find($scope.options, findObj);
} else {
finalObj = findObj;
}
if ($scope.singleSelection) {
clearObject($scope.selectedModel);
angular.extend($scope.selectedModel, finalObj);
$scope.externalEvents.onItemSelect(finalObj);
if ($scope.settings.closeOnSelect) $scope.open = false;
return;
}
dontRemove = dontRemove || false;
var exists = _.findIndex($scope.selectedModel, findObj) !== -1;
if (!dontRemove && exists) {
$scope.selectedModel.splice(_.findIndex($scope.selectedModel, findObj), 1);
$scope.externalEvents.onItemDeselect(findObj);
} else if (!exists && ($scope.settings.selectionLimit === 0 || $scope.selectedModel.length < $scope.settings.selectionLimit)) {
$scope.selectedModel.push(finalObj);
$scope.externalEvents.onItemSelect(finalObj);
}
if ($scope.settings.closeOnSelect) $scope.open = false;
};
$scope.isChecked = function (label) {
if ($scope.singleSelection) {
return $scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp]) && $scope.selectedModel[$scope.settings.idProp] === getFindObj(label)[$scope.settings.idProp];
}
return _.findIndex($scope.selectedModel, getFindObj(label)) !== -1;
};
$scope.externalEvents.onInitDone();
}
};
}]);
Try this:
Replace:
<td> <a><i class="fa fa-remove" ng-click="supprimer()"></i></a>supprimer</td>
With this:
<td> <a><i class="fa fa-remove" ng-click="supprimer($index)"></i></a>supprimer</td>
And then in your controller do this:
$scope.supprimer = function(index) {
$scope.example14model.splice(index, 1);
}
Good luck :)
i just happened to stumble upon this amazing multi-select textbox provided on the following link:
http://angularscript.com/bootstrap-multiple-select-angularjs/
i downloaded the zip and tried to run it on my local server.
the links were missing so i linked it to bootstrap and angular.js. But i was unsuccessful.can anyone try it out and see whats missing.
src/multiselect.html:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="./multiselect.js"></script>
<script src="./dist/angular-bootstrap-multiselect.js"></script>
<script src="./dist/angular-bootstrap-multiselect.min.js"></script>
<script src="./dist/angular-bootstrap-multiselect-templates.js"></script>
</head>
<body>
<div class="btn-group" style="width: 100%">
<button type="button" class="form-control btn btn-default btn-block dropdown-toggle" ng-click="toggleDropdown()" ng-disabled="disabled">
{{getButtonText()}} <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-form"
ng-style="{display: open ? 'block' : 'none'}" style="width: 100%; overflow-x: auto">
<li ng-show="showSelectAll">
<a ng-click="selectAll()" href="">
<span class="glyphicon glyphicon-ok"></span> Select All
</a>
</li>
<li ng-show="showUnselectAll">
<a ng-click="unselectAll()" href="">
<span class="glyphicon glyphicon-remove"></span> Unselect All
</a>
</li>
<li ng-show="(showSelectAll || showUnselectAll)"
class="divider">
</li>
<li role="presentation" ng-repeat="option in selectedOptions" class="active">
<a class="item-selected" href="" ng-click="toggleItem(option); $event.stopPropagation()">
<span class="glyphicon glyphicon-remove"></span>
{{getDisplay(option)}}
</a>
</li>
<li ng-show="selectedOptions.length > 0" class="divider"></li>
<li ng-show="showSearch">
<div class="dropdown-header">
<input type="text" class="form-control input-sm" style="width: 100%;"
ng-model="searchFilter" placeholder="Search..." ng-change="updateOptions()"/>
</div>
</li>
<li ng-show="showSearch" class="divider"></li>
<li role="presentation" ng-repeat="option in unselectedOptions | filter:search() | limitTo: searchLimit"
ng-if="!isSelected(option)"
ng-class="{disabled : selectionLimit && selectedOptions.length >= selectionLimit}">
<a class="item-unselected" href="" ng-click="toggleItem(option); $event.stopPropagation()">
{{getDisplay(option)}}
</a>
</li>
<li class="divider" ng-show="selectionLimit > 1"></li>
<li role="presentation" ng-show="selectionLimit > 1">
<a>{{selectedOptions.length || 0}} / {{selectionLimit}} selected</a>
</li>
</ul>
</div>
</body>
</html>
src/multiselect.js:
(function () {
'use strict';
var multiselect = angular.module('btorfs.multiselect', ['btorfs.multiselect.templates']);
multiselect.getRecursiveProperty = function (object, path) {
return path.split('.').reduce(function (object, x) {
if (object) {
return object[x];
} else {
return null;
}
}, object)
};
multiselect.directive('multiselect', function ($filter, $document, $log) {
return {
restrict: 'AE',
scope: {
options: '=',
displayProp: '#',
idProp: '#',
searchLimit: '=?',
selectionLimit: '=?',
showSelectAll: '=?',
showUnselectAll: '=?',
showSearch: '=?',
searchFilter: '=?',
disabled: '=?ngDisabled',
defaultText: '#'
},
require: 'ngModel',
templateUrl: 'multiselect.html',
link: function ($scope, $element, $attrs, $ngModelCtrl) {
$scope.selectionLimit = $scope.selectionLimit || 0;
$scope.searchLimit = $scope.searchLimit || 25;
$scope.defaultText = $scope.defaultText || 'Select';
$scope.searchFilter = '';
$scope.resolvedOptions = [];
if (typeof $scope.options !== 'function') {
$scope.resolvedOptions = $scope.options;
}
if (typeof $attrs.disabled != 'undefined') {
$scope.disabled = true;
}
$scope.toggleDropdown = function () {
$scope.open = !$scope.open;
};
var closeHandler = function (event) {
if (!$element[0].contains(event.target)) {
$scope.$apply(function () {
$scope.open = false;
});
}
};
$document.on('click', closeHandler);
var updateSelectionLists = function () {
if (!$ngModelCtrl.$viewValue) {
if ($scope.selectedOptions) {
$scope.selectedOptions = [];
}
$scope.unselectedOptions = $scope.resolvedOptions.slice(); // Take a copy
} else {
$scope.selectedOptions = $scope.resolvedOptions.filter(function (el) {
var id = $scope.getId(el);
for (var i = 0; i < $ngModelCtrl.$viewValue.length; i++) {
var selectedId = $scope.getId($ngModelCtrl.$viewValue[i]);
if (id === selectedId) {
return true;
}
}
return false;
});
$scope.unselectedOptions = $scope.resolvedOptions.filter(function (el) {
return $scope.selectedOptions.indexOf(el) < 0;
});
}
};
$ngModelCtrl.$render = function () {
updateSelectionLists();
};
$ngModelCtrl.$viewChangeListeners.push(function () {
updateSelectionLists();
});
$ngModelCtrl.$isEmpty = function (value) {
if (value) {
return (value.length === 0);
} else {
return true;
}
};
var watcher = $scope.$watch('selectedOptions', function () {
$ngModelCtrl.$setViewValue(angular.copy($scope.selectedOptions));
}, true);
$scope.$on('$destroy', function () {
$document.off('click', closeHandler);
if (watcher) {
watcher(); // Clean watcher
}
});
$scope.getButtonText = function () {
if ($scope.selectedOptions && $scope.selectedOptions.length === 1) {
return $scope.getDisplay($scope.selectedOptions[0]);
}
if ($scope.selectedOptions && $scope.selectedOptions.length > 1) {
var totalSelected;
totalSelected = angular.isDefined($scope.selectedOptions) ? $scope.selectedOptions.length : 0;
if (totalSelected === 0) {
return $scope.defaultText;
} else {
return totalSelected + ' ' + 'selected';
}
} else {
return $scope.defaultText;
}
};
$scope.selectAll = function () {
$scope.selectedOptions = $scope.resolvedOptions;
$scope.unselectedOptions = [];
};
$scope.unselectAll = function () {
$scope.selectedOptions = [];
$scope.unselectedOptions = $scope.resolvedOptions;
};
$scope.toggleItem = function (item) {
if (typeof $scope.selectedOptions === 'undefined') {
$scope.selectedOptions = [];
}
var selectedIndex = $scope.selectedOptions.indexOf(item);
var currentlySelected = (selectedIndex !== -1);
if (currentlySelected) {
$scope.unselectedOptions.push($scope.selectedOptions[selectedIndex]);
$scope.selectedOptions.splice(selectedIndex, 1);
} else if (!currentlySelected && ($scope.selectionLimit === 0 || $scope.selectedOptions.length < $scope.selectionLimit)) {
var unselectedIndex = $scope.unselectedOptions.indexOf(item);
$scope.unselectedOptions.splice(unselectedIndex, 1);
$scope.selectedOptions.push(item);
}
};
$scope.getId = function (item) {
if (angular.isString(item)) {
return item;
} else if (angular.isObject(item)) {
if ($scope.idProp) {
return multiselect.getRecursiveProperty(item, $scope.idProp);
} else {
$log.error('Multiselect: when using objects as model, a idProp value is mandatory.');
return '';
}
} else {
return item;
}
};
$scope.getDisplay = function (item) {
if (angular.isString(item)) {
return item;
} else if (angular.isObject(item)) {
if ($scope.displayProp) {
return multiselect.getRecursiveProperty(item, $scope.displayProp);
} else {
$log.error('Multiselect: when using objects as model, a displayProp value is mandatory.');
return '';
}
} else {
return item;
}
};
$scope.isSelected = function (item) {
if (!$scope.selectedOptions) {
return false;
}
var itemId = $scope.getId(item);
for (var i = 0; i < $scope.selectedOptions.length; i++) {
var selectedElement = $scope.selectedOptions[i];
if ($scope.getId(selectedElement) === itemId) {
return true;
}
}
return false;
};
$scope.updateOptions = function () {
if (typeof $scope.options === 'function') {
$scope.options().then(function (resolvedOptions) {
$scope.resolvedOptions = resolvedOptions;
updateSelectionLists();
});
}
};
// This search function is optimized to take into account the search limit.
// Using angular limitTo filter is not efficient for big lists, because it still runs the search for
// all elements, even if the limit is reached
$scope.search = function () {
var counter = 0;
return function (item) {
if (counter > $scope.searchLimit) {
return false;
}
var displayName = $scope.getDisplay(item);
if (displayName) {
var result = displayName.toLowerCase().indexOf($scope.searchFilter.toLowerCase()) > -1;
if (result) {
counter++;
}
return result;
}
}
};
}
};
});
}());
Try to add to your <Body> the ng-app="MyApp" and to your <div> the ng-controller="MyControllerApp".
The result will be
<body ng-app="MyApp">
<div ng-controller="MyControllerApp">
angular.module("modalApp", ['ngAnimate', "ngMaterial", "ngMessages"])
.controller('modalCtrl', function ($scope) {
$scope.direction = 'left';
$scope.currentIndex = 0;
$scope.init = true;
$scope.initWizard = function() {
if($scope.init) {
$scope.setCurrentIndex(0);
}
$scope.init = false;
}
$scope.setCurrentIndex = function (index) {
$scope.currentIndex = index;
}
$scope.isCurrentIndex = function (index) {
return $scope.currentIndex === index;
}
$scope.nextModalStep = function () {
$scope.direction = 'left';
if($scope.currentIndex < $scope.modalSteps.length - 1) {
++$scope.currentIndex;
}
}
$scope.prevModalStep = function () {
$scope.direction = 'right';
if($scope.currentIndex > 0) {
--$scope.currentIndex;
}
}
})
.animation('.modalViewAnimation', function () {
return {
beforeAddClass: function(element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
var elementWidth = element.parent().width();
startPoint = 0;
if(scope.direction !== "right") {
finishPoint = elementWidth;
} else {
finishPoint = -elementWidth;
}
TweenMax.fromTo(element, 0.5, { left: startPoint}, {x: finishPoint, onComplete: done });
} else {
done();
}
},
removeClass: function(element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
var elementWidth = element.parent().width();
finishPoint = 0;
if(scope.direction !== "right") {
startPoint = elementWidth;
} else {
startPoint = -elementWidth;
}
TweenMax.to("section", 0.5, { height: element.outerHeight()});
TweenMax.fromTo(element, 0.5, { x: startPoint}, {x: finishPoint, onComplete: done, delay:0.25});
} else {
done();
}
}
}
});
I have a wizard slider that is almost working. My problem is accessing the direction property in my animation function after it has been set in the controller. The scope object has value inside the animation but the dot notation of retrieving the direction property with "scope.direction" returns undefined. Why? Any help greatly appreciated. Worth mentioning, I modified the animation function ever so slightly from this https://github.com/simpulton/angular-photo-slider to achieve what I want. I can't see why my scope.direction returns undefined?
Not sure the reason, but I had to get it from childHead.
The key for me was injecting rootScope.
Working example: JSFiddle
(edited to 'tidy' my code ;-) )
var myApp = angular.module('myApp', ['ngAnimate']);
myApp.controller('myCtrl', function($scope) {
$scope.onOff = false;
});
myApp.animation('.fold-animation-expand', ['$animateCss', '$rootScope',
function($animateCss, $rootScope) {
return {
enter: function(element, doneFn) {
console.log("onOff:" + $rootScope.$$childHead.onOff);
return $animateCss(element, {
from: {
"font-size": '0px'
},
to: {
"font-size": '20px'
},
duration: 2
});
}
}
}
]);
.box {
height: 100px;
width: 100px;
background-color: blue;
color: white;
float: left;
}
.box.ng-enter {
transition: 2s linear all;
opacity: 0;
}
.box.ng-enter.ng-enter-active {
opacity: 1;
}
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-2.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
</head>
<body>
<div ng-controller='myCtrl'>
onOff state:{{onOff}}
<br>
<br>
<button ng-click="onOff?onOff=false:onOff=true">Run animation</button>
<hr>
<div ng-if="onOff == true" class="fold-animation-expand" style="font-size:0px">
Expanding element
</div>
<hr>Example of CSS-based transition
<br>
<div ng-if="onOff" class="box">Animated Box</div>
</div>
</body>
</html>
I'm using Angular google Maps trying to get an info window working. When a marker is selected, the window is placed there and shown. Its content is some text and also some directives. The directives inside even work, except for when I try to bind some data its attributes.
In this case I'm having a rating directive (shows a bunch of stars) that takes a number attribute, as so:
<div stars number="person.rating"></div>
Note that this directives works just fine in a couple of other places in my app. Also, when I replace person.rating' for3, the directive renders perfectly. when I useperson.rating` outside of this div, it returns a number as expected.
Only when I combine the person.rating inside the number attribute, inside the window directive, do things go awry:
<ui-gmap-google-map center='map.center' class="big-maps" options='map.options' events="map.events" zoom='map.zoom'>
<ui-gmap-window coords="selectedCoords" show="windowOptions.visible" closeClick="closeWindow">
<div>
Name: {{person.firstName}}, Rating: {{person.rating}} <!-- these work just fine. -->
<div> So here we are. {{person.rating}}</div> <!-- this also works just fine. -->
<div stars number="3"></div> <!-- Even this works fine. -->
<div stars number="person.rating"></div> <!-- But this doesn't... -->
</div>
</ui-gmap-window>
<ui-gmap-markers
models='markers'
idKey='id'
coords="'coords'"
icon="'icon'"
options="'options'"
doCluster="false"
click="showWindow"
>
</ui-gmap-markers>
</ui-gmap-google-map>
The directive:
ndtApp.directive('stars', stars);
function stars() {
return {
restrict: "AE",
replace: 'true',
scope: {
number: "=",
size: "#"
},
templateUrl: "shared/stars/stars.html",
controller: controller
};
}
function controller($scope){
$scope.getEmptyStarsArray = getEmptyStarsArray;
$scope.getStarsArray = getStarsArray;
$scope.ratingSize = "";
activate();
function activate(){
if ($scope.size == 'sm'){
$scope.ratingSize = 'rating-sm';
} else if ($scope.size == 'lg'){
$scope.ratingSize = 'rating-lg';
}
console.log($scope.number);
}
function getEmptyStarsArray(){
if ($scope.number === undefined) return 0;
var rating = Math.round($scope.number);
if (rating > 4) return null;
return new Array(5 - rating);
}
function getStarsArray(){
if ($scope.number === undefined) return 0;
var rating = Math.round($scope.number);
if (rating === 0) return null;
if (rating > 5) return new Array(5);
return new Array(rating);
}
}
stars.html:
<div class="stars">
<span ng-repeat="i in getStarsArray() track by $index" class="{{ratingSize}} rating glyphicon glyphicon-star"></span><span ng-repeat="i in getEmptyStarsArray() track by $index" class="{{ratingSize}} rating glyphicon glyphicon-star-empty"></span>
</div>
Any help is highly appreciated!
It seems directive scope property is not getting bound, try to change scope for number property from number: "=" to number: "#" and directive initialization from <div stars number="person.rating"></div> to <div stars number="{{person.rating}}"></div>
Below is provided a working similar example:
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope,uiGmapIsReady) {
$scope.map = {
center: { latitude: 40.1451, longitude: -99.6680 },
zoom: 4,
options: { scrollwheel: false }
};
$scope.windowOptions = { visible: false };
var getRandomLat = function() {
return Math.random() * (90.0 + 90.0) - 90.0;
};
var getRandomLng = function () {
return Math.random() * (180.0 + 180.0) - 180.0;
};
var getRandomRating = function() {
return Math.floor(Math.random() * 11);
};
var createRandomMarker = function(i) {
var ret = {
latitude: getRandomLat(),
longitude: getRandomLng(),
title: 'Hotel #' + i,
show: false,
id: i
};
return ret;
};
$scope.onClick = function(marker, eventName, model) {
$scope.windowOptions.visible = true;
$scope.selectedHotel = model;
$scope.rating = { number: getRandomRating()};
};
$scope.closeWindow = function () {
$scope.windowOptions.visible = false;
};
$scope.hotels = [];
for (var i = 0; i < 256; i++) {
$scope.hotels.push(createRandomMarker(i));
}
});
appMaps.directive('rating',
function() {
return {
restrict: "AE",
replace: true,
scope: {
//number: "=",
number: "#"
},
controller: ratingController,
//template: '<div >Rating: {{ ::number }}</div>',
template: function(tElem, tAttrs){
return '<div class="rating"> Rating:' + tAttrs.number + '</div>';
}
};
});
function ratingController($scope){
console.log($scope.number);
}
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" events="map.events">
<ui-gmap-window coords="selectedHotel" show="windowOptions.visible" closeclick="closeWindow">
<div>
<div>{{selectedHotel.title}}</div>
<div rating number="{{rating.number}}"></div>
</div>
</ui-gmap-window>
<ui-gmap-markers models="hotels" coords="'self'" icon="'icon'" click="onClick">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>