AngularJS - NVDA screen reader not finding names of child elements - angularjs

Apologies for the bare-bones HTML here...
I've got some AngularJS components that are rendering this HTML for a multiselectable dropdown:
<ul role="listbox">
<li>
<div ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row ng-scope" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option" ng-repeat="opt in $select.items" ng-if="$select.open" ng-click="$select.select(opt,$select.skipFocusser,$event)" tabindex="0" id="ui-select-choices-row-0-1" style="">
<a href="" class="ui-select-choices-row-inner" uis-transclude-append="">
<span ng-class="{'strikethrough' : rendererInactive(opt)}" title="ALBANY" aria-label="ALBANY" class="ng-binding ng-scope">ALBANY</span>
</a>
</div>
(a hundred or so more options in similar divs)
</li>
</ul>
What we need is for screen reading software to speak aloud each option as it's highlighted via arrow key navigation. As it is now, NVDA says "blank" when keying through the list. If, in the directive we're using to create this HTML, I add role="presentation" to the <ul>, then NVDA will recite the entire list of options as soon as the dropdown opens, but not individually for each arrow key keystroke (and after hitting Escape to make it stop talking, keying through the options says "blank" again).
I keep thinking that the listbox and option roles are in the correct places, but is something else in the structure preventing the screen reader from finding the values correctly?

This answer got quite long, the first 3 points are most likely the problem, the rest are other considerations / observations
There are a few things that are likely to cause this issue, although without seeing the generated HTML rather than the Angular Source there could be others.
Most likely culprit is that your anchors are not valid. You cannot have a blank href (href="") for it to be valid. Looking at your source code could you not remove this and adjust your CSS or change it to a <div>?
Second most likely culprit is that role="option" should be on the direct children on role="listbox". Move it to your <li>s and make them selectable with tabindex="-1" (see below point on tabindex="0") instead. (in fact why not simply remove the surrounding <div> and apply all of your angular directives to the <li> directly).
Third most likely culprit is the fact that aria-label is not needed and may in fact be interfering, a screen reader will read the text within your <span> without this. Golden rule - do not use aria unless you can't portray the information another way.
You also need to add aria-selected="true" (or false) to each <li role="option"> to indicate whether an item is selected or not.
Also you should add aria-multiselectable="true" to the <ul> to indicate it is a multi select.
While you are at it, remove the title attribute, it doesn't add anything useful here.
aria-activedescendant="id" should be used to indicate which item is currently focused.
Be careful with tabindex="0" - I can't see if this is applied to everything but really it should be tabindex="-1" and you programatically manage focus as otherwise users could tab to items that they aren't meant to. tabindex="0" should be on the main <ul>.
Due to the complex nature of multi-selects you would be much better using a group of checkboxes as they provide a lot of the functionality for free, but that is just a suggestion.
The following example I found on codepen.io covers 95% of everything if you use a checkbox instead and would be a good base for you to pick apart and adapt to your needs, as you can see checkboxes make life a lot easier as all the selected not selected functionality is built in.
(function($){
'use strict';
const DataStatePropertyName = 'multiselect';
const EventNamespace = '.multiselect';
const PluginName = 'MultiSelect';
var old = $.fn[PluginName];
$.fn[PluginName] = plugin;
$.fn[PluginName].Constructor = MultiSelect;
$.fn[PluginName].noConflict = function () {
$.fn[PluginName] = old;
return this;
};
// Defaults
$.fn[PluginName].defaults = {
};
// Static members
$.fn[PluginName].EventNamespace = function () {
return EventNamespace.replace(/^\./ig, '');
};
$.fn[PluginName].GetNamespacedEvents = function (eventsArray) {
return getNamespacedEvents(eventsArray);
};
function getNamespacedEvents(eventsArray) {
var event;
var namespacedEvents = "";
while (event = eventsArray.shift()) {
namespacedEvents += event + EventNamespace + " ";
}
return namespacedEvents.replace(/\s+$/g, '');
}
function plugin(option) {
this.each(function () {
var $target = $(this);
var multiSelect = $target.data(DataStatePropertyName);
var options = (typeof option === typeof {} && option) || {};
if (!multiSelect) {
$target.data(DataStatePropertyName, multiSelect = new MultiSelect(this, options));
}
if (typeof option === typeof "") {
if (!(option in multiSelect)) {
throw "MultiSelect does not contain a method named '" + option + "'";
}
return multiSelect[option]();
}
});
}
function MultiSelect(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn[PluginName].defaults, options);
this.destroyFns = [];
this.$toggle = this.$element.children('.toggle');
this.$toggle.attr('id', this.$element.attr('id') + 'multi-select-label');
this.$backdrop = null;
this.$allToggle = null;
init.apply(this);
}
MultiSelect.prototype.open = open;
MultiSelect.prototype.close = close;
function init() {
this.$element
.addClass('multi-select')
.attr('tabindex', 0);
initAria.apply(this);
initEvents.apply(this);
updateLabel.apply(this);
injectToggleAll.apply(this);
this.destroyFns.push(function() {
return '|'
});
}
function injectToggleAll() {
if(this.$allToggle && !this.$allToggle.parent()) {
this.$allToggle = null;
}
this.$allToggle = $("<li><label><input type='checkbox'/>(all)</label><li>");
this.$element
.children('ul:first')
.prepend(this.$allToggle);
}
function initAria() {
this.$element
.attr('role', 'combobox')
.attr('aria-multiselect', true)
.attr('aria-expanded', false)
.attr('aria-haspopup', false)
.attr('aria-labeledby', this.$element.attr("aria-labeledby") + " " + this.$toggle.attr('id'));
this.$toggle
.attr('aria-label', '');
}
function initEvents() {
var that = this;
this.$element
.on(getNamespacedEvents(['click']), function($event) {
if($event.target !== that.$toggle[0] && !that.$toggle.has($event.target).length) {
return;
}
if($(this).hasClass('in')) {
that.close();
} else {
that.open();
}
})
.on(getNamespacedEvents(['keydown']), function($event) {
var next = false;
switch($event.keyCode) {
case 13:
if($(this).hasClass('in')) {
that.close();
} else {
that.open();
}
break;
case 9:
if($event.target !== that.$element[0] ) {
$event.preventDefault();
}
case 27:
that.close();
break;
case 40:
next = true;
case 38:
var $items = $(this)
.children("ul:first")
.find(":input, button, a");
var foundAt = $.inArray(document.activeElement, $items);
if(next && ++foundAt === $items.length) {
foundAt = 0;
} else if(!next && --foundAt < 0) {
foundAt = $items.length - 1;
}
$($items[foundAt])
.trigger('focus');
}
})
.on(getNamespacedEvents(['focus']), 'a, button, :input', function() {
$(this)
.parents('li:last')
.addClass('focused');
})
.on(getNamespacedEvents(['blur']), 'a, button, :input', function() {
$(this)
.parents('li:last')
.removeClass('focused');
})
.on(getNamespacedEvents(['change']), ':checkbox', function() {
if(that.$allToggle && $(this).is(that.$allToggle.find(':checkbox'))) {
var allChecked = that.$allToggle
.find(':checkbox')
.prop("checked");
that.$element
.find(':checkbox')
.not(that.$allToggle.find(":checkbox"))
.each(function(){
$(this).prop("checked", allChecked);
$(this)
.parents('li:last')
.toggleClass('selected', $(this).prop('checked'));
});
updateLabel.apply(that);
return;
}
$(this)
.parents('li:last')
.toggleClass('selected', $(this).prop('checked'));
var checkboxes = that.$element
.find(":checkbox")
.not(that.$allToggle.find(":checkbox"))
.filter(":checked");
that.$allToggle.find(":checkbox").prop("checked", checkboxes.length === checkboxes.end().length);
updateLabel.apply(that);
})
.on(getNamespacedEvents(['mouseover']), 'ul', function() {
$(this)
.children(".focused")
.removeClass("focused");
});
}
function updateLabel() {
var pluralize = function(wordSingular, count) {
if(count !== 1) {
switch(true) {
case /y$/.test(wordSingular):
wordSingular = wordSingular.replace(/y$/, "ies");
default:
wordSingular = wordSingular + "s";
}
}
return wordSingular;
}
var $checkboxes = this.$element
.find('ul :checkbox');
var allCount = $checkboxes.length;
var checkedCount = $checkboxes.filter(":checked").length
var label = checkedCount + " " + pluralize("item", checkedCount) + " selected";
this.$toggle
.children("label")
.text(checkedCount ? (checkedCount === allCount ? '(all)' : label) : 'Select a value');
this.$element
.children('ul')
.attr("aria-label", label + " of " + allCount + " " + pluralize("item", allCount));
}
function ensureFocus() {
this.$element
.children("ul:first")
.find(":input, button, a")
.first()
.trigger('focus')
.end()
.end()
.find(":checked")
.first()
.trigger('focus');
}
function addBackdrop() {
if(this.$backdrop) {
return;
}
var that = this;
this.$backdrop = $("<div class='multi-select-backdrop'/>");
this.$element.append(this.$backdrop);
this.$backdrop
.on('click', function() {
$(this)
.off('click')
.remove();
that.$backdrop = null;
that.close();
});
}
function open() {
if(this.$element.hasClass('in')) {
return;
}
this.$element
.addClass('in');
this.$element
.attr('aria-expanded', true)
.attr('aria-haspopup', true);
addBackdrop.apply(this);
//ensureFocus.apply(this);
}
function close() {
this.$element
.removeClass('in')
.trigger('focus');
this.$element
.attr('aria-expanded', false)
.attr('aria-haspopup', false);
if(this.$backdrop) {
this.$backdrop.trigger('click');
}
}
})(jQuery);
$(document).ready(function(){
$('#multi-select-plugin')
.MultiSelect();
});
* {
box-sizing: border-box;
}
.multi-select, .multi-select-plugin {
display: inline-block;
position: relative;
}
.multi-select > span, .multi-select-plugin > span {
border: none;
background: none;
position: relative;
padding: .25em .5em;
padding-right: 1.5em;
display: block;
border: solid 1px #000;
cursor: default;
}
.multi-select > span > .chevron, .multi-select-plugin > span > .chevron {
display: inline-block;
transform: rotate(-90deg) scale(1, 2) translate(-50%, 0);
font-weight: bold;
font-size: .75em;
position: absolute;
top: .2em;
right: .75em;
}
.multi-select > ul, .multi-select-plugin > ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
left: 0;
top: 100%;
min-width: 100%;
z-index: 1000;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
display: none;
max-height: 320px;
overflow-x: hidden;
overflow-y: auto;
}
.multi-select > ul > li, .multi-select-plugin > ul > li {
white-space: nowrap;
}
.multi-select > ul > li.selected > label, .multi-select-plugin > ul > li.selected > label {
background-color: LightBlue;
}
.multi-select > ul > li.focused > label, .multi-select-plugin > ul > li.focused > label {
background-color: DodgerBlue;
}
.multi-select > ul > li > label, .multi-select-plugin > ul > li > label {
padding: .25em .5em;
display: block;
}
.multi-select > ul > li > label:focus, .multi-select > ul > li > label:hover, .multi-select-plugin > ul > li > label:focus, .multi-select-plugin > ul > li > label:hover {
background-color: DodgerBlue;
}
.multi-select.in > ul, .multi-select-plugin.in > ul {
display: block;
}
.multi-select-backdrop, .multi-select-plugin-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="multi-select-plugin-label" style="display:block;">Multi Select</label>
<div id="multi-select-plugin" aria-labeledby="multi-select-plugin-label">
<span class="toggle">
<label>Select a value</label>
<span class="chevron"><</span>
</span>
<ul>
<li>
<label>
<input type="checkbox" name="selected" value="0"/>
Item 1
</label>
</li>
<li>
<label>
<input type="checkbox" name="selected" value="1"/>
Item 2
</label>
</li>
<li>
<label>
<input type="checkbox" name="selected" value="2"/>
Item 3
</label>
</li>
<li>
<label>
<input type="checkbox" name="selected" value="3"/>
Item 4
</label>
</li>
</ul>
</div>
Also you will see that gov.uk uses a checkbox pattern (within the organisation filter on the left on the linked page) for their multi-selects (with a filter - something you may consider with 100 different options as they have highlighted some key concerns in this article).
As you can see (and I wasn't finished) there is a lot to consider.
Hope I haven't scared you too much and the first few points solve the issue you originally asked about!

Related

Angular - how to make $interval work from user input

I am taking date and time from user as input and then wanted to display it interval in label
After that datetime completes I want to make that label color change.
Please guide me how can i achieve this.
https://codepen.io/shreyag020/pen/vKvmdx
$interval(function(){
todoTime=$scope.datetime;
});
Here is an example of how you could change the background color of a div over time. Clicking the start button begins a countdown timer from 1 minute. It starts out with no background, once the timer is started it turns green, at 15 seconds before time runs out it turns orange and when the time has run out it turns red. The change of the background color is animated using ng-class, ngAnimate and the animation hooks.
angular.module('app', ['ngAnimate'])
.controller('ctrl', function($scope, $interval) {
var timerPromise;
$scope.reset = function() {
$scope.userTime = new Date;
$scope.userTime.setMinutes(1);
$scope.userTime.setSeconds(0);
$scope.resetVisible = false;
$scope.started = false;
}
$scope.start = function() {
$scope.started = true;
$scope.resetVisible = false;
timerPromise = $interval(function() {
if ($scope.userTime.getSeconds() > 0 || $scope.userTime.getMinutes() > 0) {
$scope.userTime.setTime($scope.userTime.getTime() - 1000);
}
}, 1000);
}
$scope.pause = function() {
$interval.cancel(timerPromise);
$scope.started = false;
$scope.resetVisible = true;
}
$scope.timeBackground = function() {
if ($scope.started) {
if ($scope.userTime.getMinutes() === 0 && $scope.userTime.getSeconds() === 0) {
$scope.resetVisible = true;
$interval.cancel(timerPromise);
return 'expired';
}
if ($scope.userTime.getMinutes() === 0 && $scope.userTime.getSeconds() <= 15) {
return 'warning';
}
return 'ok';
}
return 'clear';
}
$scope.reset();
});
.timeDisplay {
color: white;
font-weight: bold;
}
.ok-add,
.ok-remove,
.warning-add,
.warning-remove,
.expired-add,
.expired-remove {
transition: background-color 1000ms linear;
}
.warning,
.warning-add.pre-warning-add-active {
background-color: orange;
}
.expired,
.expired-add.expired-add-active {
background-color: red;
}
.ok,
.ok-add.ok-add-active {
background-color: green;
}
.clear {
background-color: none;
color: black;
}
div {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="timeDisplay" ng-class="timeBackground()">
Time remaining: {{userTime | date: 'mm:ss'}}
</div>
<div ng-if="!started">
<button ng-click="start()">Start</button>
</div>
<div ng-if="started">
<button ng-click="pause()">Pause</button>
</div>
<div ng-if="resetVisible">
<button ng-click="reset()">Reset</button>
</div>
</div>

Custom Directive is not working with div id

I have a custom directive called packageHeader, When the user scrolls through the list, the header must show at top of the list until the next one is reached. It's working with only window element not with div id, here i'm attaching the html
<div id="list">
<package-header>
<div>Header 1</div>
</package-header>
<div>content Header 1</div>
<package-header>
<div>Header2</div>
</package-header>
<div>content Header2</div>
<package-header>
<div>Header 3</div>
</package-header>
<div>content Header 3</div>
<div>
my custom directive
angular.module('myApp')
.directive('packageHeader',
['$window', function($window) {
var stickies = [],
scroll = function scroll() {
var header= angular.element(document.querySelector("#List"))[0];
console.log("scroll _ scroll");
angular.forEach(stickies, function($sticky, index) {
var sticky = $sticky[0],
pos = $sticky.data('pos');
if (pos <= header.pageYOffset) {
console.log("scroll offset Y");
var $next = stickies[index + 1],
next = $next ? $next[0] : null,
npos = $next.data('pos');
$sticky.addClass("fixed");
if (next && next.offsetTop >= npos - next.clientHeight)
$sticky.addClass("absolute").css("top", npos - sticky.clientHeight + 'px');
} else {
console.log("scroll offset X");
var $prev = stickies[index - 1],
prev = $prev ? $prev[0] : null;
$sticky.removeClass("fixed");
if (prev && header.pageYOffset <= pos - prev.clientHeight)
$prev.removeClass("absolute").removeAttr("style");
}
});
},
link = function($scope, element, attrs) {
var sticky = element.children()[0],
$sticky = angular.element(sticky);
element.css('height', sticky.clientHeight + 'px');
$sticky.data('pos', sticky.offsetTop);
stickies.push($sticky);
};
angular.element(document.querySelector("#List"))
.off('scroll', scroll)
.on('scroll', scroll);
return {
restrict: 'E',
transclude: true,
//sticky - getting from style sheet
template: '<sticky ng-transclude></sticky>',
link: link
};
}]);
CSS
package-header,
sticky {
display: block;
}
package-header{
opacity:.8;
}
package-header>sticky {
background: #9aa2a8;
line-height: 24px;
z-index: 1;
color: #fff;
font-weight: 700;
}
package-header>sticky.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
package-header>sticky.fixed.absolute {
position: absolute;
}
Please help me to resolve my issue

Setting the values in multi-select isteven of angular js

I'm trying to use Angularjs multi-select into my project.
The following html is my multi-select div.
<div
multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px"
>
</div>
I know that I can use $scope.marks=data in the controller.
But the problem is $scope.marks is a global variable which I couldn't change..
Is there any way to set the values in multi-select without using the input-model?
Well, doing some tests here, i could get something with multiselecting:
var languages = ["C#", "Java", "Ruby", "Go", "C++", "Pascal", "Assembly"]; //The items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.marks = {};
for (lang in languages) {
$scope.marks[lang] = {
name: languages[lang],
marked: false
};
}
$scope.marks[3].marked = true; //mark "Go" and "C++" by default.
$scope.marks[4].marked = true;
$scope.theMarkedOnes = function() {
outp = "";
for (m in $scope.marks) {
if ($scope.marks[m].marked)
outp += $scope.marks[m].name + ", ";
}
if (outp.length == 0) {
return "(none)";
} else {
return outp.substr(0, outp.length - 2);
}
}
$scope.setMark = function(markone) {
markone.marked = !markone.marked;
}
})
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 0.7em;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.multiselector {
background-color: #CCCCCC;
overflow-y: scroll;
width: 17em;
height: 13em;
border-radius: 0.7em;
}
.multiselector .item {
cursor: pointer;
padding: 0.2em 0.3em 0.2em 0.0em;
}
.itemtrue {
background-color: #9999AA;
}
.msshow {
background-color: #cccccc;
border-radius: 0.7em;
margin-top: 1em;
padding: 0.6em;
width: 17em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="multiselector">
<div ng-repeat="mark in marks" class="item item{{mark.marked}}" ng-click="setMark(mark)">{{mark.name}}</div>
</div>
<div class="msshow"> <b>Selected:</b> {{theMarkedOnes()}}</div>
</div>
Set & Get selected values, name and text of Angularjs isteven-multi-select
<div isteven-multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px">
</div>
Add items
$scope.marks= [
{ name: 'Mark I', value: 'Mark i', text: 'This is Mark 1', ticked: true },
{ name: 'Mark II', value: 'Mark ii', text: 'This is Mark 2' },
{ name: 'Mark III', value: 'Mark iii', text: 'This is Mark 3' }
];
Get selected item (on change)
$scope.fClick = function (data) {
console.log(data.name);
console.log(data.value);
console.log(data.text);
return;
}
Select item (with code)
$scope.abc = function (data) {
console.log(data.element1, data.element2);
angular.forEach($scope.marks, function (item) {
if (item.value == data.element1) {
item.ticked = true;
}
else {
item.ticked = false;
}
});
}
Deselect item (clear)
$scope.ClearClick = function () {
$scope.Filter = { selectMarks: 'Mark i' };
$scope.marks.map(function (item) {
if ($scope.Filter.selectMarks == item.value)
item.ticked = true;
else
item.ticked = false;
});
}

How to swipe from left to right Ionic list item?

I want to swipe Ionic list items to both sides. (i.e left-right AND right-left). It works perfectly for right-left swipe but I am not able to swipe list item to left side.
I used $ionicGesture for left-right swipe, and it also gives me an alert when i use swiperight event: event($ionicGesture.on('swiperight', scope.reportEvent, elem)), but I am not able to let it show the ion-option-button at the left side.
Here is my directive and controller code:
.directive('onSwipeRight', function($ionicGesture) {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
var gestureType = attrs.gestureType;
switch(gestureType) {
case 'swipeRight':
$ionicGesture.on('swiperight', scope.reportEvent, elem);
break;
case 'swipeleft':
$ionicGesture.on('swipeleft', scope.reportEvent, elem);
break;
case 'doubletap':
$ionicGesture.on('doubletap', scope.reportEvent, elem);
break;
case 'tap':
$ionicGesture.on('tap', scope.reportEvent, elem);
break;
}
}
}
})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.reportEvent = function (event) {
alert("hi");
console.log('Reporting : ' + event.type);
event.preventDefault();
};
})
Here is my html code.
<ion-view view-title="Chats">
<ion-content>
<ion-list can-swipe="true">
<ion-item gesture-type="swipeRight" on-swipe-right="swipeRight()" class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="share(item)" side="left">
Share
</ion-option-button>
<ion-option-button class="button-assertive" ng-click="remove(chat)" side="right">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
So I want to display share button at left side and delete button at right side.
Can anybody provide me specific solution for it?
I've edited ionic lib to do something like that. But i couldn't do a JSFiddle or a Code Pen i Will give you the link to my modified ionic.css and ionic.bundle.js!
TL;DR
https://gist.githubusercontent.com/booris/847f044d2ef2a05101ce/raw/2274365384f5eed3e4538b269f3a7d7998eb22ed/ionic.css
https://gist.githubusercontent.com/booris/847f044d2ef2a05101ce/raw/2274365384f5eed3e4538b269f3a7d7998eb22ed/ionic.bundle.js
Just replace it with yours, start an ionic project blank. And put this HTML in it:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-list show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item href="#">
Item 1
<ion-option-button side="right" class="button-light icon ion-heart"></ion-option-button>
<ion-option-button side="right" class="button-light icon ion-email"></ion-option-button>
<ion-option-button side="left" class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
<ion-item href="#">
Item 2
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
You can specify the wipe direction with left, right or both.
And in the ion-options-button you can give it a side.
Hope it helps, anything you need just ask! I will try to comment my changes in the code later on!
EDIT:
I will try to explain what i did.
First change the ionOptionButton directive to create to div for the button, one left and one right
//added second div with class item-options-left for the left buttons
var ITEM_TPL_OPTION_BUTTONS =
'<div class="item-options invisible">' +
'</div>' + '<div class="item-options-left invisible">' +
'</div>';
IonicModule.directive('ionOptionButton', [function () {
function stopPropagation(e) {
e.stopPropagation();
}
return {
restrict: 'E',
require: '^ionItem',
priority: Number.MAX_VALUE,
compile: function ($element, $attr) {
$attr.$set('class', ($attr['class'] || '') + ' button', true);
return function ($scope, $element, $attr, itemCtrl) {
if (!itemCtrl.optionsContainer) {
itemCtrl.optionsContainer = jqLite(ITEM_TPL_OPTION_BUTTONS);
itemCtrl.$element.append(itemCtrl.optionsContainer);
}
//[NEW] if it as an attribute side = 'left' put the button in the left container
if ($attr.side === 'left') {
angular.element(itemCtrl.optionsContainer[1]).append($element);
itemCtrl.$element.addClass('item-left-editable');
} else{
angular.element(itemCtrl.optionsContainer[0]).append($element);
itemCtrl.$element.addClass('item-right-editable');
}
//Don't bubble click up to main .item
$element.on('click', stopPropagation);
};
}
};
}]);
Add CSS to left buttons in ionic.css file
.item-options-left {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%; }
.item-options-left .button {
height: 100%;
border: none;
border-radius: 0;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center; }
.item-options .button:before {
margin: 0 auto; }
Now change the ion-list controller to accept swipe directions attribute
.controller('$ionicList', [
'$scope',
'$attrs',
'$ionicListDelegate',
'$ionicHistory',
function ($scope, $attrs, $ionicListDelegate, $ionicHistory) {
var self = this;
//[NEW] object with can-swipe attr and swipe-direction side attr, default direction is left
var swipe = {
isSwipeable: true,
side: 'left'
};
var isReorderShown = false;
var isDeleteShown = false;
var deregisterInstance = $ionicListDelegate._registerInstance(
self, $attrs.delegateHandle,
function () {
return $ionicHistory.isActiveScope($scope);
}
);
$scope.$on('$destroy', deregisterInstance);
self.showReorder = function (show) {
if (arguments.length) {
isReorderShown = !!show;
}
return isReorderShown;
};
self.showDelete = function (show) {
if (arguments.length) {
isDeleteShown = !!show;
}
return isDeleteShown;
};
//[NEW] get swipe direction attribute and store it in a variable to access in other function
self.canSwipeItems = function (can) {
if (arguments.length) {
swipe.isSwipeable = !!can;
swipe.side = $attrs.swipeDirection;
}
return swipe;
};
self.closeOptionButtons = function () {
self.listView && self.listView.clearDragEffects();
};
}]);
To end, you should replace slideDrag function with this one, just search for it in ionic.bundle.js
//[NEW] add this var to the others in the function
var ITEM_OPTIONS_CLASS_RIGHT = 'item-options-left';
var SlideDrag = function (opts) {
this.dragThresholdX = opts.dragThresholdX || 10;
this.el = opts.el;
this.item = opts.item;
this.canSwipe = opts.canSwipe;
};
SlideDrag.prototype = new DragOp();
SlideDrag.prototype.start = function (e) {
var content, buttonsLeft, buttonsRight, offsetX, buttonsLeftWidth, buttonsRightWidth;
if (!this.canSwipe().isSwipeable) {
return;
}
if (e.target.classList.contains(ITEM_CONTENT_CLASS)) {
content = e.target;
} else if (e.target.classList.contains(ITEM_CLASS)) {
content = e.target.querySelector('.' + ITEM_CONTENT_CLASS);
} else {
content = ionic.DomUtil.getParentWithClass(e.target, ITEM_CONTENT_CLASS);
}
// If we don't have a content area as one of our children (or ourselves), skip
if (!content) {
return;
}
// Make sure we aren't animating as we slide
content.classList.remove(ITEM_SLIDING_CLASS);
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons
buttonsLeft = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS);
if (!buttonsLeft) {
return;
}
//[NEW] get the Right buttons
buttonsRight = content.parentNode.querySelector('.' + ITEM_OPTIONS_CLASS_RIGHT);
if (!buttonsRight) {
return;
}
// [NEW] added the same functionality to both sides, to make buttons visible when dragged
if(e.gesture.direction === "left")
buttonsLeft.classList.remove('invisible');
else
buttonsRight.classList.remove('invisible');
//[NEW] added buttonRight and buttonLeft properties to currentDrag
buttonsLeftWidth = buttonsLeft.offsetWidth;
buttonsRightWidth = buttonsRight.offsetWidth;
this._currentDrag = {
buttonsLeft: buttonsLeft,
buttonsRight: buttonsRight,
buttonsLeftWidth: buttonsLeftWidth,
buttonsRightWidth: buttonsRightWidth,
content: content,
startOffsetX: offsetX
};
};
/**
* Check if this is the same item that was previously dragged.
*/
SlideDrag.prototype.isSameItem = function (op) {
if (op._lastDrag && this._currentDrag) {
return this._currentDrag.content == op._lastDrag.content;
}
return false;
};
SlideDrag.prototype.clean = function (isInstant) {
var lastDrag = this._lastDrag;
if (!lastDrag || !lastDrag.content) return;
lastDrag.content.style[ionic.CSS.TRANSITION] = '';
lastDrag.content.style[ionic.CSS.TRANSFORM] = '';
if (isInstant) {
lastDrag.content.style[ionic.CSS.TRANSITION] = 'none';
makeInvisible();
ionic.requestAnimationFrame(function () {
lastDrag.content.style[ionic.CSS.TRANSITION] = '';
});
} else {
ionic.requestAnimationFrame(function () {
setTimeout(makeInvisible, 250);
});
}
function makeInvisible() {
lastDrag.buttonsLeft && lastDrag.buttonsLeft.classList.add('invisible');
lastDrag.buttonsRight && lastDrag.buttonsRight.classList.add('invisible');
}
};
SlideDrag.prototype.drag = ionic.animationFrameThrottle(function (e) {
var buttonsLeftWidth;
var buttonsRightWidth;
// We really aren't dragging
if (!this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if (!this._isDragging &&
((Math.abs(e.gesture.deltaX) > this.dragThresholdX) ||
(Math.abs(this._currentDrag.startOffsetX) > 0))) {
this._isDragging = true;
}
if (this._isDragging) {
buttonsLeftWidth = this._currentDrag.buttonsLeftWidth;
buttonsRightWidth = this._currentDrag.buttonsRightWidth;
// Grab the new X point, capping it at zero
//[NEW] added right swipe new position
if (this.canSwipe().side === 'left' || (this.canSwipe().side === 'both' && e.gesture.direction === 'left'))
var newX = Math.min(0, this._currentDrag.startOffsetX + e.gesture.deltaX);
else if (this.canSwipe().side === 'right' || (this.canSwipe().side === 'both' && e.gesture.direction === 'right'))
var newX = Math.max(0, this._currentDrag.startOffsetX + e.gesture.deltaX);
var buttonsWidth = 0;
if (e.gesture.direction === 'right')
buttonsWidth = buttonsRightWidth;
else
buttonsWidth = buttonsLeftWidth;
// If the new X position is past the buttons, we need to slow down the drag (rubber band style)
if (newX < -buttonsWidth) {
// Calculate the new X position, capped at the top of the buttons
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
}
this._currentDrag.content.$$ionicOptionsOpen = newX !== 0;
this._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + newX + 'px, 0, 0)';
this._currentDrag.content.style[ionic.CSS.TRANSITION] = 'none';
}
});
SlideDrag.prototype.end = function (e, doneCallback) {
var self = this;
// There is no drag, just end immediately
if (!self._currentDrag) {
doneCallback && doneCallback();
return;
}
// If we are currently dragging, we want to snap back into place
// The final resting point X will be the width of the exposed buttons
var restingPoint;
if (e.gesture.direction === 'left' && (this.canSwipe().side === 'left' || this.canSwipe().side === 'both'))
restingPoint = -self._currentDrag.buttonsLeftWidth;
if (e.gesture.direction === 'right' && (this.canSwipe().side === 'right' || this.canSwipe().side === 'both'))
restingPoint = self._currentDrag.buttonsRightWidth;
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
var buttonsWidth = 0;
if (e.gesture.direction === 'right')
buttonsWidth = self._currentDrag.buttonsRightWidth;
else
buttonsWidth = self._currentDrag.buttonsLeftWidth;
if (e.gesture.deltaX > -(buttonsWidth / 2)) {
// If we are going left or right but too slow, or going right, go back to resting
if ((e.gesture.direction == "left" || e.gesture.direction == "right") && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0;
}
}
ionic.requestAnimationFrame(function () {
if (restingPoint === 0) {
self._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
var buttonsLeft = self._currentDrag.buttonsLeft;
var buttonsRight = self._currentDrag.buttonsRight;
setTimeout(function () {
buttonsLeft && buttonsLeft.classList.add('invisible');
buttonsRight && buttonsRight.classList.add('invisible');
}, 250);
} else {
self._currentDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(' + restingPoint + 'px,0,0)';
}
self._currentDrag.content.style[ionic.CSS.TRANSITION] = '';
// Kill the current drag
if (!self._lastDrag) {
self._lastDrag = {};
}
ionic.extend(self._lastDrag, self._currentDrag);
if (self._currentDrag) {
self._currentDrag.buttons = null;
self._currentDrag.content = null;
}
self._currentDrag = null;
// We are done, notify caller
doneCallback && doneCallback();
});
};
My solution is not perfect, but it works. and there are others ways of doing this, i did it this way to understand better how Ionic works and how they do Ionic directives.
Any feedback is welcome, and with this you can try to make your own or improve this one.
I made item-swipe-pane directive which creates a container inside a ion-item, which is visible when the item is swiped to the left or to the right.
var ITEM_SWIPE_PANE_TPL = '<div class="item-options invisible item-swipe-pane"></div>';
var DIRECTION_RIGHT_CLASS = 'direction-right';
module.directive( 'itemSwipePane' , function() {
return {
restrict: 'E',
require: '^ionItem',
link: function (scope, $element, attrs, itemCtrl) {
var container;
var direction = 'left';
// Set direction
if (attrs['direction'] && attrs['direction'] === 'right'){
direction = 'right';
} else if (attrs['direction'] && attrs['direction'] === 'left'){
direction = 'left';
}
if (direction === 'left'){
if (!itemCtrl.itemSwipeLeft){
itemCtrl.itemSwipeLeft = angular.element(ITEM_SWIPE_PANE_TPL);
itemCtrl.$element.append(itemCtrl.itemSwipeLeft);
}
container = itemCtrl.itemSwipeLeft;
} else if (direction === 'right'){
if (!itemCtrl.itemSwipeRight){
itemCtrl.itemSwipeRight = angular.element(ITEM_SWIPE_PANE_TPL);
// If direction is right, move position of item options
// to the left - override inherited right:0;
itemCtrl.itemSwipeRight.css({right: 'auto'});
// "direction-right" is container selector.
itemCtrl.itemSwipeRight.addClass(DIRECTION_RIGHT_CLASS);
itemCtrl.$element.append(itemCtrl.itemSwipeRight);
}
container = itemCtrl.itemSwipeRight;
}
container.append($element);
// Animation to slowly close opened item.
itemCtrl.$element.addClass('item-right-editable');
} // link
}; // return
}); // item-swipe-pane
Attribute direction controls swipe direction. Possible values are left or right. Default direction is left.
You can place any content it the directive, button, text, image, icon, avatar, background image, etc.
The container is quite raw in a sense that everything you place in it has to be formatted by CSS or by other means.
item-swipe-pane is compatible with ion-option-button, ion-delete-button and ion-reorder-button directives.
It is possible to combine two item-swipe-panes on the same ion-item. Each one with different swipe direction.
Example with two item-swipe-panes, one is on the left and one on the right:
<ion-item>
Two item-swipe-panes. One on the left, one on the right.
<item-swipe-pane direction="right">
<button class="button button-balanced ion-arrow-right-c"></button>
<button class="button button-positive">Update</button>
<button class="button button-royal">Add</button>
</item-swipe-pane>
<item-swipe-pane class="left-pane">
<button class="button button-assertive">Delete</button>
<button class="button button-calm">Share</button>
<button class="button button-balanced ion-arrow-left-c"></button>
</item-swipe-pane>
</ion-item>
More item-swipe-pane examples are on Codepen.
Important note:
Unfortunately Ionic Framework does not allow right swipe (from left to right) of a list item, so I had to make few modifications to the Ionic library. Here is summary of modifications to Ionic Framework.
Links:
Modified Ionic library download.
item-swipe-pane directive on Github.
here is an sample code using that u can achieve it
swipe-pane.html
<div class="mk-swipe-pane">
<div class="col-xs-4 swipe-actions-padding" ng-repeat="action in swipeActions">
<div ng-click="currentActionClick(action.actionName)"
ng-class="[action.actionCssclass]">
<div class="icon-font-size">
<i ng-class="[action.actionIcon]"></i>
</div>
{{action.actionName}}
</div>
</div>
</div>
swipe-pane.js
angular.module('mk.Directives')
.directive('mkSwipePane', function ($swipe) {
return {
templateUrl: "lib/mobikon/directives/notifications/swipe-pane/swipe-pane.html",
restrict: 'E',
scope: {
swipeActions: "="
},
replace: true,
link: function ($scope, element) {
var MAX_VERTICAL_DISTANCE = 75,
MAX_VERTICAL_RATIO = 0.3,
MIN_HORIZONTAL_DISTANCE = 30,
startCoords,
valid,
elWidth = $(element).width(),
direction = 1,
pointerTypes = ['touch'],
delayForAnimation = 70;
$scope.currentActionClick = function (actionName) {
$scope.$emit('currentActionName', actionName);
};
function validSwipe(coords) {
if (!startCoords) return false;
var deltaY = Math.abs(coords.y - startCoords.y);
var deltaX = (coords.x - startCoords.x) * direction;
return valid && // Short circuit for already-invalidated swipes.
deltaY < MAX_VERTICAL_DISTANCE &&
deltaX > 0 &&
deltaX > MIN_HORIZONTAL_DISTANCE &&
deltaY / deltaX < MAX_VERTICAL_RATIO;
}
$swipe.bind(element, {
'start': function (coords, event) {
startCoords = coords;
valid = true;
},
'move': function (coords, event) {
var diffX = coords.x - startCoords.x;
if (diffX < 0) {
direction = -1; // For left swipe
} else {
direction = 1; // For right swipe
}
if (validSwipe(coords)) {
var marginLeft = parseInt($(element).css("marginLeft"));
if (direction === -1 && Math.abs(diffX) <= elWidth / 2) {
$(element).prev().css({"margin-left": diffX});
} else if (direction === 1 && (marginLeft + diffX) <= 0) {
$(element).prev().css({"margin-left": marginLeft + diffX});
}
}
},
'cancel': function (event) {
valid = false;
},
'end': function (coords, event) {
if (validSwipe(coords)) {
if (direction === -1) {
$(element).prev().animate({"margin-left": "-50%"}, delayForAnimation);
$scope.$emit('isCurrentRowClickable', {isSwiped: false});
} else {
$(element).prev().animate({"margin-left": "0%"}, delayForAnimation);
$scope.$emit('isCurrentRowClickable', {isSwiped: true});
}
}
}
}, pointerTypes);
}
}
});
require("./swipe-pane.html");
require("./swipe-pane.scss");
swipe-pane.scss
#import "../../../../../views/mixins";
[mk-swipe-pane], .mk-swipe-pane {
display: inline-block;
width: 50%;
$icon-outline-color: $mk-pure-white;
$icon-font-size: 35px;
$icon-text-font-size: 16px;
$icon-margin-top:-10px;
$icon-padding-top:35%;
$icon-padding-bottom:5px;
$icon-container-height:120px;
$icon-width:20px;
#media screen and (max-width: 768px) {
.swipe-actions-padding {
padding-left: 0px;
padding-right: 0px;
float: none;
display: inline-block;
}
.icon-font-size {
font-size: $icon-font-size;
}
.email-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-1-icon-background-orange;
color: $icon-outline-color;
}
.sms-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-2-icon-background-blue;
color: $icon-outline-color;
}
.call-icon {
text-align: center;
font-size: $icon-text-font-size;
margin-top: $icon-margin-top;
padding-top: $icon-padding-top;
height: $icon-container-height;
vertical-align: middle;
background-color: $mk-swipe-action-3-icon-background-green;
color: $icon-outline-color;
}
.disabled {
background-color: $mk-background-gray !important;
}
}
}
Unlike other answers, i've created an angular wrapper for swiper (that seems to be the slider lib used in ionic 2) focused on ionic v1 instead of editing the framework itself.
My wrapper is avaliable here, and there's an demo here.
You can use npm install ionic-swiper to install it, and import like instructed on README.md:
In javascript with webpack (you can import the whole bundle too like a normal js):
import {moduleName as ionicSwiperModule} from 'ionic-swiper';
angular.module('yourModule',[ionicSwiperModule]);
Edit:
I've made some changes since i wrote this answer, so here's a more correct way to use my lib:
<ionic-swiper ng-repeat="i in [1,2,3]"
center-on-disable="{{ true || 'disable default center on disable behavior'}}"
is-swipable="{{ true || 'some prop to watch' }}"
left-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}"
right-swiper="{{:: true || 'or any prop that evaluate to a boolean' }}">
<!-- containerId is available inside this context -->
<!-- Left transclude is optional -->
<left-swiper class="side-item">
Left
</left-swiper>
<!-- Central transclude is required -->
<central-swiper class="central-item">
Central {{:: containerId}}
</central-swiper>
<!-- Right transclude is optional -->
<right-swiper class="side-item">
Right
</right-swiper>
</ionic-swiper>
And here's the original answer usage example:
In HTML (you will need to adjust some css too):
<ionic-list>
<div
swiper-container="true"
class="swiper-container"
ng-repeat="item in [1,2,3,4,5,6]">
<!-- containerId is available inside this context -->
<div class="swiper-wrapper">
<ion-item swiper-slide="center">
This swiper container id is {{:: containerId }}
</ion-item>
<ion-item swiper-slide="right">
Right Button
</ion-item>
<ion-item swiper-slide="left">
Left Button
</ion-item>
</div>
</div>
</ionic-list>
Here's an gif from the demo (i've recorded this in a touchpad, that's why it seems 'sticky')

create a decimal star rating for a comment in angularjs

Here is a code which present star rating code in angularjs. In some point I need to have a average of all the rating in whole the system so instead of rate:2 , i will have 2.4 . In such case i am interesting to present 2 star which are complete fill and one which has only half filled. How can I change my code in order to add this functionality?
Moreover, initially I would like to don't specify any star filled. That's also need a modification which I am not sure how should be done?
<div ng-app="app" ng-controller="RatingCtrl" class="container">
<h1>Angular Star Rating Directive</h1>
<div star-rating ng-model="rating1" max="10" on-rating-selected="rateFunction(rating)"></div>
<star-rating ng-model="rating2" readonly="isReadonly"></star-rating>
<label>
<input type="checkbox" ng-model="isReadonly" /> Is Readonly
</label>
<div><strong>Rating 1:</strong> {{rating1}}</div>
<div><strong>Rating 2:</strong> {{rating2}}</div>
</div>
In my directive
angular.module("app", [])
.controller("RatingCtrl", function($scope) {
$scope.rating1 = 1;
$scope.rating2 = 2;
$scope.isReadonly = true;
$scope.rateFunction = function(rating) {
console.log("Rating selected: " + rating);
};
})
.directive("starRating", function() {
return {
restrict : "EA",
template : "<ul class='rating' ng-class='{readonly: readonly}'>" +
" <li ng-repeat='star in stars' ng-class='star' ng-click='toggle($index)'>" +
" <i class='fa fa-star'></i>" + //&#9733
" </li>" +
"</ul>",
scope : {
ratingValue : "=ngModel",
max : "=?", //optional: default is 5
onRatingSelected : "&?",
readonly: "=?"
},
link : function(scope, elem, attrs) {
if (scope.max == undefined) { scope.max = 5; }
function updateStars() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled : i < scope.ratingValue
});
}
};
scope.toggle = function(index) {
if (scope.readonly == undefined || scope.readonly == false){
scope.ratingValue = index + 1;
scope.onRatingSelected({
rating: index + 1
});
}
};
scope.$watch("ratingValue", function(oldVal, newVal) {
if (newVal) { updateStars(); }
});
}
};
});
and css
.rating {
margin: 0;
padding: 0;
display: inline-block;
}
.rating li {
padding: 1px;
color: #ddd;
font-size: 20px;
text-shadow: .05em .05em #aaa;
list-style-type: none;
display: inline-block;
cursor: pointer;
}
.rating li.filled {
color: #fd0;
}
.rating.readonly li.filled {
color: #666;
}
http://codepen.io/anon/pen/RPLJYW
Thank you for any help.
You could use two identical set of stars to achieve this, position absolute one on top of the other. One fills your background star shapes (gray) and the one position at the top will represent your fill.
The top set of stars are all filled but its container's width can be adjusted to the proportion of stars representing your rate.
var score = 2.4;
var maxStars = 5;
var starContainerMaxWidth = 100; //pixls
var filledInStarsContainerWidth = score / maxStars * starsMaxWidth;
A CSS overflow hidden will hide the portion of stars that are not turned on, in effect allowing you to show 2.4 stars filled.
Update:
I have bashed a quick example http://codepen.io/anon/pen/NqazVa , will need some tidy up and reshuffling but the average rate is calculated and displayed correctly.
Check the AngularUI Bootstrap Rating component.
http://angular-ui.github.io/bootstrap/#/rating

Resources