I have a md-date-picker inside md-menu, but when I click on datepicker, md-menu closes. Here is codepen for this. It is related to this bug of ng-material. What can be workaround for this?
HTML:
<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">
<div class="menu-demo-container" layout-align="center center" layout="column">
<h2 class="md-title">Month Select</h2>
<p>Select a month by clicking the input</p>
<md-menu>
<input md-menu-origin="" aria-label="Open phone interactions menu" ng-focus="ctrl.openMenu($mdOpenMenu, $event)" ng-model="ctrl.selectedMonth">
<md-menu-content width="4" ng-click="$event.stopPropagation()">
<md-datepicker ng-model="dateFilter" md-placeholder="Till date" md-min-date="dateFilter.fromDate"></md-datepicker>
</md-menu-content>
</md-menu>
</div>
</div>
JS:
angular
.module('MyApp')
.controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
this.setMonth = function(val) {
this.month = val;
this.setSelectedMonth();
};
this.notificationsEnabled = true;
this.toggleNotifications = function() {
this.notificationsEnabled = !this.notificationsEnabled;
};
this.nextYear = function() {
this.year++;
this.setSelectedMonth();
};
this.preYear = function() {
this.year = this.year - 1;
this.setSelectedMonth();
};
}).directive('stopEvent', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (attr && attr.stopEvent)
element.bind(attr.stopEvent, function(e) {
e.stopPropagation();
});
}
};
});
I found a solution that works but is not the best answer.
HTML:
<md-datepicker id="myDatePicker"
ng-model="dateFilter"
md-placeholder="Till date"
md-min-date="dateFilter.fromDate">
</md-datepicker>
JS:
function setupDateButton()
{
var dateButtonFix = document.getElementById("myDatePicker").children;
for (var i = 0; i < dateButtonFix.length; i++)
{
if (dateButtonFix[i].tagName == 'BUTTON' || dateButtonFix[i].tagName == 'DIV')
{
if (dateButtonFix[i].tagName == 'DIV')
{
var child2 = dateButtonFix[i].children;
for (var j = 0; j < child2.length; j++)
{
if (child2[j].tagName == 'BUTTON')
{
child2[1].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
}
}
}
else
dateButtonFix[0].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
}
}
}
setupDateButton();
I'm sure there is a better way to do this but as of right now, it works.
Today I got to the same problem, and I created a class-restricted directive to solve this problem.
This is my directive's code:
const TRUE = 'true';
const PREVENT_CLOSE = 'md-prevent-menu-close';
class CalendarBtnFixDirective {
constructor() {
this.restrict = 'C';
this.require = '^^mdDatepicker'
}
link(scope, element, attrs, datePickerCtrl) {
const nativeElement = element[0];
const preventMenuClose = datePickerCtrl.$attrs.mdPreventMenuClose;
if ([TRUE, PREVENT_CLOSE].indexOf(preventMenuClose) !== -1) {
nativeElement.setAttribute(PREVENT_CLOSE, PREVENT_CLOSE);
}
}
}
export const MdCalendarFixModule = angular
.module('md.calendar.fix.module', [])
.directive('mdDatepickerTriangleButton', () => new CalendarBtnFixDirective())
.name;
Now in your md-datepicker you can use the md-prevent-menu-close attribute
Add md-prevent-menu-close="true" to the button or to the icon. This will prevent the menu from closing.
https://material.angularjs.org/1.0.3/api/directive/mdMenu
Related
I have a list and when I click on the button, values are moving as expected. But when I click on the submit button, the selected id's are not getting appended to database. I tried to do the same example and made some R&D also. But I didn't get expected results. I don't know what's wrong. Any logic/advice greatly appreciated.
Angularjs:
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.moveUp = function () {
for(var i = 0; i < $scope.vehicle.length; i++) {
var idx = $scope.peoples.indexOf($scope.vehicle[i])
console.log(idx);
if (idx > 0) {
var itemToMove = $scope.cars.splice(idx, 1)
console.log(itemToMove[0])
$scope.cars.splice(idx-1, 0, itemToMove[0]);
}
}
};
$scope.moveDown = function () {
var revVeh = $scope.vehicle.concat();
revVeh.reverse();
for(var i = 0; i < revVeh.length; i++) {
var idx = $scope.cars.indexOf(revVeh[i])
console.log(idx);
if (idx < $scope.cars.length) {
var itemToMove = $scope.cars.splice(idx, 1)
console.log(itemToMove[0])
$scope.cars.splice(idx+1, 0, itemToMove[0]);
}
}
};
});
This is my plnkr example(https://plnkr.co/edit/uyg99UO2Hm31AlLSBRAg)
I have created this plunker for your question answer
https://plnkr.co/edit/g49UoXTyAohVveNcw5eS?p=preview
Or CODE
HTML CODE :
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="main">
<options-up-down-directive option-to-process-up-down-of-keys="optionData"
option-to-select="dataToSelect1" class="col-5">
</options-up-down-directive>
</body>
</html>
JAVASCRIPT CODE :
var app = angular.module('app', []);
app.controller('main', function($scope){
$scope.optionData = ['abc', 'xyz', 'TDS'];
$scope.dataToSelect1 = {};
});
app.directive('optionsUpDownDirective',optionsUpDownDirective);
function optionsUpDownDirective() {
var directiveController = function($scope) {
var selfController = this;
var optionToProcessUpDownOfKeys = [];
var itemToMove = null;
$scope.optionToSelect.selectedData = null;
$scope.keyToMoveUpAndDown = $scope.optionToProcessUpDownOfKeys[0];
selfController.moveKeyUpAndDown = function(mode) {
optionToProcessUpDownOfKeys = $scope.optionToProcessUpDownOfKeys;
for(var i = 0, keysLength = $scope.optionToProcessUpDownOfKeys.length; i < keysLength; i++) {
if(optionToProcessUpDownOfKeys[i] == $scope.keyToMoveUpAndDown) {
var index = i;
console.log($scope.optionToSelect);
if ( index > 0 && mode === 'up') {
$scope.optionToSelect.selectedData = optionToProcessUpDownOfKeys.splice(index, 1);
$scope.optionToProcessUpDownOfKeys.splice(index-1, 0, $scope.optionToSelect.selectedData[0]);
} else if(mode === 'down'){
$scope.optionToSelect.selectedData = optionToProcessUpDownOfKeys.splice(index, 1);
$scope.optionToProcessUpDownOfKeys.splice(index+1, 0, $scope.optionToSelect.selectedData[0]);
}
break;
}
}
};
};
return {
restrict : 'E',
scope : {
optionToProcessUpDownOfKeys : "=?optionToProcessUpDownOfKeys",
optionToSelect: "=?optionToSelect"
},
template :`<select id="select" size="7" ng-model="keyToMoveUpAndDown" ng-options="key for key in optionToProcessUpDownOfKeys" ng-click="keyToChangeCtrl.enableUpOrDownButton(keyToMoveUpAndDown)">
</select>
<button ng-click="keyToChangeCtrl.moveKeyUpAndDown('up')" class="local-action-button" id="moveUp">
<i class="glyphicon glyphicon-arrow-up button-glyphicon-label-dis"></i>UP</button>
<button ng-click="keyToChangeCtrl.moveKeyUpAndDown('down')" class="local-action-button" id="moveDown">
<i class="glyphicon glyphicon-arrow-down button-glyphicon-label-dis"></i>DOWN</button>
</div>`,
controller : ['$scope', directiveController],
controllerAs : "keyToChangeCtrl"
};
}
Uncaught ReferenceError: Unable to process binding "visible: function (){return NeedPaging }"
Message: NeedPaging is not defined
at visible (eval at parseBindingsString (knockout-3.4.2.js:68), :3:60)
at update (knockout-3.4.2.js:104)
at function.a.B.i (knockout-3.4.2.js:73)
at Function.Uc (knockout-3.4.2.js:52)
at Function.Vc (knockout-3.4.2.js:51)
at Function.U (knockout-3.4.2.js:51)
at Object.a.m.a.B (knockout-3.4.2.js:49)
at knockout-3.4.2.js:73
at Object.r (knockout-3.4.2.js:11)
at m (knockout-3.4.2.js:72)
I'm stuck any help would be great thank you in advance.
I'm only getting this error in production however in my local it is working just fine I'm not sure what I'm missing. It looks like the comment is being removed which is giving me the error.
$(function () {
"use strict";
var PagingVm = function (options) {
var self = this;
self.PageSize = ko.observable(options.pageSize);
self.CurrentPage = ko.observable(1);
self.TotalCount = ko.observable(options.totalCount);
self.PageCount = ko.pureComputed(function () {
return Math.ceil(self.TotalCount() / self.PageSize());
});
self.SetCurrentPage = function (page) {
if (page < self.FirstPage)
page = self.FirstPage;
if (page > self.LastPage())
page = self.LastPage();
self.CurrentPage(page);
};
self.FirstPage = 1;
self.LastPage = ko.pureComputed(function () {
return self.PageCount();
});
self.NextPage = ko.pureComputed(function () {
var next = self.CurrentPage() + 1;
if (next > self.LastPage())
return null;
return next;
});
self.PreviousPage = ko.pureComputed(function () {
var previous = self.CurrentPage() - 1;
if (previous < self.FirstPage)
return null;
return previous;
});
self.NeedPaging = ko.pureComputed(function () {
return self.PageCount() > 1;
});
self.NextPageActive = ko.pureComputed(function () {
return self.NextPage() != null;
});
self.PreviousPageActive = ko.pureComputed(function () {
return self.PreviousPage() != null;
});
self.LastPageActive = ko.pureComputed(function () {
return (self.LastPage() !== self.CurrentPage());
});
self.FirstPageActive = ko.pureComputed(function () {
return (self.FirstPage !== self.CurrentPage());
});
// this should be odd number always
var maxPageCount = 7;
self.generateAllPages = function () {
var pages = [];
for (var i = self.FirstPage; i <= self.LastPage(); i++)
pages.push(i);
return pages;
};
self.generateMaxPage = function () {
var current = self.CurrentPage();
var pageCount = self.PageCount();
var first = self.FirstPage;
var upperLimit = current + parseInt((maxPageCount - 1) / 2);
var downLimit = current - parseInt((maxPageCount - 1) / 2);
while (upperLimit > pageCount) {
upperLimit--;
if (downLimit > first)
downLimit--;
}
while (downLimit < first) {
downLimit++;
if (upperLimit < pageCount)
upperLimit++;
}
var pages = [];
for (var i = downLimit; i <= upperLimit; i++) {
pages.push(i);
}
return pages;
};
self.GetPages = ko.pureComputed(function () {
self.CurrentPage();
self.TotalCount();
if (self.PageCount() <= maxPageCount) {
return ko.observableArray(self.generateAllPages());
} else {
return ko.observableArray(self.generateMaxPage());
}
});
self.Update = function (e) {
self.TotalCount(e.TotalCount);
self.PageSize(e.PageSize);
self.SetCurrentPage(e.CurrentPage);
};
self.GoToPage = function (page) {
if (page >= self.FirstPage && page <= self.LastPage())
self.SetCurrentPage(page);
}
self.GoToFirst = function () {
self.SetCurrentPage(self.FirstPage);
};
self.GoToPrevious = function () {
var previous = self.PreviousPage();
if (previous != null)
self.SetCurrentPage(previous);
};
self.GoToNext = function () {
var next = self.NextPage();
if (next != null)
self.SetCurrentPage(next);
};
self.GoToLast = function () {
self.SetCurrentPage(self.LastPage());
};
}
var MainViewModel = function () {
var self = this;
self.PageSize = ko.observable(10);
self.AllData = ko.observableArray();
self.PagaData = ko.observableArray();
self.ActivePaging = ko.observable(false);
self.Paging = ko.observable(new PagingVm({
pageSize: self.PageSize(),
totalCount: self.AllData.length
}));
self.DeSelect = function (mainModel, event) {
if (event.target.value === self.SelectedSearchOption()) {
self.SelectedSearchOption(null);
event.target.checked = false;
}
return true;
};
self.pageSizeSubscription = self.PageSize.subscribe(function (newPageSize) {
self.Paging().Update({
PageSize: newPageSize,
TotalCount: self.AllData().length,
CurrentPage: self.Paging().CurrentPage()
});
self.RenderAgain();
});
self.currentPageSubscription = self.Paging().CurrentPage.subscribe(function () {
self.RenderAgain();
});
self.RenderAgain = function () {
var result = [];
var startIndex = (self.Paging().CurrentPage() - 1) * self.Paging().PageSize();
var endIndex = self.Paging().CurrentPage() * self.Paging().PageSize();
for (var i = startIndex; i < endIndex; i++) {
if (i < self.AllData().length)
result.push(self.AllData()[i]);
}
self.PagaData(result);
}
self.dispose = function () {
self.currentPageSubscription.dispose();
self.pageSizeSubscription.dispose();
}
}
var vm = new MainViewModel();
ko.applyBindings(vm);
vm.RenderAgain();
});
<div data-bind="visible: ActivePaging" class="row" style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 form-group">
<label>page size</label>
<input class="form-control" type="number" min="1" data-bind="textInput:PageSize" />
</div>
<div class="col-sm-6">
<div class="form-group marg-top-reports">
<!-- ko with:Paging()-->
<ul data-bind="visible: NeedPaging" class="pull-left pagination">
<li data-bind="css: { disabled: !FirstPageActive() }">
<a data-bind="click: GoToFirst">First</a>
</li>
<li data-bind="css: { disabled: !PreviousPageActive() }">
<a data-bind="click: GoToPrevious">Previous</a>
</li>
<!-- ko foreach: GetPages() -->
<li data-bind="css: { active: $parent.CurrentPage() === $data }">
<a data-bind="click: $parent.GoToPage, text: $data"></a>
</li>
<!-- /ko -->
<li data-bind="css: { disabled: !NextPageActive() }">
<a data-bind="click: GoToNext">Next</a>
</li>
<li data-bind="css: { disabled: !LastPageActive() }">
<a data-bind="click: GoToLast">Last</a>
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
</div>
so i have an array of object i am ng-repeating and works beautifully, but i want to list the array of objects that have a property value of 'true' . i feel like the built in angualr filter should be sufficient. But cant get it to work
here is my attempt . Basically i only want asset.name , asset.status etc of the objects that have disabled property 'true'
<md-virtual-repeat-container id="vertical-container" ng-show="$ctrl.infiniteAssets.getLength() > 0 && $ctrl.switch">
<md-list>
<md-list-item class="list-page" md-on-demand md-virtual-repeat="asset in $ctrl.infiniteAssets | assetsFilter:$ctrl.searchValue | filter:{disabled:true}:true" ng-click="$ctrl.loadDetail(asset)">
<span class="search-status" style="border-left-color:{{asset.statusColor}};"></span>
<p >{{asset.name}} </p>
<label hide-xs ng-if="asset.disabled" class="ng-animate-disabled">
<md-chips>
<md-chip >{{'LABELS.DISABLED' | translate}}</md-chip>
</md-chips>
</label>
<label ><i>{{asset.status || 'UNKNOWN'}}</i></label>
<md-button aria-label="Delete Asset" class="md-icon-button md-warn" layout-padding ng-click="$ctrl.deleteAsset(asset)">
<md-icon md-svg-icon="delete" class="modelTrashIcon"></md-icon>
</md-button>
<md-divider></md-divider>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
$onInit = () => {
this.swtich = false;
this.hideToolbarTools = false;
this.searchOpen = false;
this.componentList = [];
this.alertCount = 0;
this.loading = false;
this.disableTitle = false;
this.searchValue = "";
this.first = true;
this.settings = {
printLayout: true,
showRuler: true,
showSpellingSuggestions: true,
presentationMode: 'edit'
};
this.global = this.$rootScope;
this.$rootScope.$on('transform-toolbar-open', () => {
//hide toolbar controls on mobile
if(this.$mdMedia('xs')){
this.hideToolbarTools = true;
}else{
this.hideToolbarTools = false
}
})
this.$rootScope.$on('transform-toolbar-close', () => {
//show toolbar controls
this.hideToolbarTools = false;
})
this.loadAssets()
}
loadAssets = () => {
var self = this;
self.infiniteAssets = {
numLoaded_: 0,
toLoad_: 0,
items: [],
pageNum:1,
virtualIndex:0,
getItemAtIndex: function (index) {
this.virtualIndex=index;
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
// Required.
getLength: function () {
if (this.virtualIndex > this.numLoaded_) {
return this.numLoaded_ ;
}else{
return this.numLoaded_ + 5 ;
}
},
fetchMoreItems_ : function (index) {
if (this.toLoad_ < index) {
self.loading = true;
this.toLoad_ += 20;
self.siAsset.getAssets(this.pageNum++,20)
.then(angular.bind(this, function (assets) {
//this.objLength = assets.length;
if(! assets.statusCode){
this.items = this.items.concat(assets);
this.toLoad_ = this.items.length;
this.numLoaded_ = this.toLoad_;
}
self.loading = false;
}))
}
}
};
console.log('check',this.infiniteAssets)
}
Actually the filter:{disabled:true} will work fine.
If it is not work I think you can filter them in you script side as
var infiniteAssets = infiniteAssets.filter(i=>i.disabled == true);
or use angular filter
var infiniteAssets = $filter('filter')(infiniteAssets,{disabledled:true})
you can try by putting ng-if condition below the ng-repeat
<md-virtual-repeat-container id="vertical-container" ng-show="$ctrl.infiniteAssets.getLength() > 0 && $ctrl.switch">
<md-list>
<md-list-item class="list-page" md-on-demand md-virtual-repeat="asset in $ctrl.infiniteAssets ng-click="$ctrl.loadDetail(asset)">
<div ng-if="asset.disabled">
<span class="search-status" style="border-left-color:{{asset.statusColor}};"></span>
<p >{{asset.name}} </p>
<label hide-xs ng-if="asset.disabled" class="ng-animate-disabled">
<md-chips>
<md-chip >{{'LABELS.DISABLED' | translate}}</md-chip>
</md-chips>
</label>
<label ><i>{{asset.status || 'UNKNOWN'}}</i></label>
<md-button aria-label="Delete Asset" class="md-icon-button md-warn" layout-padding ng-click="$ctrl.deleteAsset(asset)">
<md-icon md-svg-icon="delete" class="modelTrashIcon"></md-icon>
</md-button>
<md-divider></md-divider>
</div>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
i decide to create a whole new function for disabled ones and use javascript filter to achieve this feature
if(! asset.statusCode){
let disabled = asset.filter((a)=>{
return a.disabled ==true
})
this.items = this.items.concat(disabled);
this.toLoad_ = this.items.length;
this.numLoaded_ = this.toLoad_;
}
I have developed a directive, but it is always applying functionality on the last element in the page, here is my code:
HTML:
<div ng-controller="MyCtrl">
<input type="text" email-commy comma-separated-data="model1" class="form-control"/>
<input type="text" email-commy comma-separated-data="model2" class="form-control"/>
</div>
JS:
var app=angular.module('myApp', []);
function MyCtrl($scope) {
$scope.model1 = "abc#gmail.com";
$scope.model2 = "abc2#gmail.com";
}
app.directive("emailCommy", function(){
return {
scope: {
commaSeparatedData: '='
},
restrict: "A",
multiple: true,
link: function (scope, elem, attrs, ngModel) {
function handler(dataString){
function buildEmailList() {
var lis = data.map(function (em, index) {
return "<li>" + em + "<span class='remove-element' data-index='" + index + "'>×</span>" + "</li>";
}).join("");
var input = $("<input/>", {"class": "form-control shadow-element", "placeholder": "Enter..."});
lis += "<li class='input-field'>" + input.wrap("<p/>").parent().html() + "</li>";
return "<ul class='list-inline'>" + lis + "</ul>";
}
function renderer() {
$wrapper.empty().append(buildEmailList());
elem.addClass("hide").before($wrapper);
listener();
}
function listener() {
angular.element(".shadow-element").off("keypress").on("keypress", function (evt) {
var $this = $(this),
charCode = evt.which || evt.keyCode;
//add input in case of (comma, enter, and semi-colon) pressed
if ($this.val() && (charCode === 44 || charCode === 13 || charCode === 59)) {
data.push($this.val().toLowerCase());
renderer();
updateModel();
$this.val("");
}
});
angular.element(".remove-element").off("click").on("click", function () {
var $this = $(this),
index = $this.data("index");
data.splice(index, 1);
updateModel();
renderer();
});
}
function updateModel(){
var updatedVal = data.join(",");
$(elem).val(updatedVal);
}
if(dataString) {
var data = dataString.split(",").map(function (em) {
return em.toLowerCase().trim();
});
var $wrapper = $("<div/>", {"class": "email-container"});
renderer();
}
}
handler(scope.commaSeparatedData);
//scope.$watch(attrs.commaSeparatedData, handler);
}
};
});
Here is fiddle:
http://jsfiddle.net/RmDuw/928/
Directive only working on last element. If i add data in first directive it adds to below one.
Please help, and suggest me how to fix.
Thanks
Just change your code in order to select the input of current directive like this:
function listener() {
$wrapper.find('input').on(...
and for remove element:
$wrapper.find('span')..
See the fiddle
Create a diretive for content rating. I was used ng-mouseenter and ng-mouseleave.
There are two types content rating user can click and one is readonly.
when I passed readonly attribute ng-mouseleave is working. but When I didn't pass it is not working
basically I am using ng-mouseenter and ng-mouseleave for providing hovering effect on it and remove hovering effect.
This is my jsfiddle link
https://jsfiddle.net/amitme/3Ldad4v6/1/
var app = angular.module("glyph", []);
app.controller("contentRatingController", ['$scope', function($scope) {
$scope.rating1 = 5;
$scope.rating2 = 2.5;
$scope.isReadonly = true;
}]);
app.directive('contentRating', function contentRating() {
var defaults = JSON.parse('{}');
return {
restrict: 'E',
transclude: false,
require: '',
scope: {},
bindToController: {
ratingValue: "=ngModel",
max: "#",
onRatingSelect: "&?",
readonly: "=?",
name: "#"
},
controller: function() {
var g = this;
g.gRatingTemp = g.ratingValue;
if (g.max == undefined) {
g.max = 5;
}
g.updateStars = function(ratingValue) {
g.stars = [];
for (var i = 0; i < g.max; i++) {
g.stars.push({
filled: (i < ratingValue),
halffilled: (ratingValue)
});
}
console.log(g.stars);
};
g.updateStars(g.ratingValue);
g.toggle = function(index) {
if (g.readonly == undefined || g.readonly == false) {
g.ratingValue = index + 1;
console.log("----------toggle--------" + g.ratingValue);
if (g.gRatingTemp != g.ratingValue) {
g.gRatingTemp = g.ratingValue;
g.updateStars(g.ratingValue);
}
}
}
g.mouseEnter = function(index) {
console.log("----------mouseEnter--------" + index);
if (g.readonly == undefined || g.readonly == false) {
g.updateStars(index + 1);
}
};
g.mouseLeave = function(index) {
alert("----------mouseLeave--------" + index);
if (g.readonly == undefined || g.readonly == false) {
g.updateStars(index + 1);
}
};
},
compile: function() {
return {
pre: function(scope, el, attrs) {
for (var key in defaults) {
if (!attrs[key]) {
attrs[key] = defaults[key];
}
}
},
post: function(scope, el, attrs) {
}
};
},
template: '<ul class="rate" ng-class="{readonly: Ctrl.readonly}"> <li ng-repeat="star in Ctrl.stars" class="star" ng-mouseover="$event.stopPropagation(); Ctrl.mouseEnter($index)" ng-mouseleave="$event.stopPropagation(); Ctrl.mouseLeave($index)"> <input type="radio" id="{{Ctrl.name}}{{$index}}" name="{{Ctrl.name}}" value="{{$index+1}}" ng-model="Ctrl.ratingValue" ng-click="Ctrl.toggle($index)"/><label for="{{Ctrl.name}}{{$index}}" title="{{$index+1}}" ng-class="{filled:( star.filled && star.halffilled >= $index+1)}"></label> <input type="radio" id="{{Ctrl.name}}{{$index+1/2}}" name="{{Ctrl.name}}" value="{{$index+1/2}}" ng-model="Ctrl.ratingValue" ng-click="Ctrl.toggle($index-1/2)"/><label class="half" for="{{Ctrl.name}}{{$index+1/2}}" title="{{$index+1/2}}" ng-class="{filled: star.filled}" ></label> </li></ul><!-- <ul class="star-rating" ng-class="{readonly: Ctrl.readonly}"> <li ng-repeat="star in Ctrl.stars" class="star {{yellowStar}}" ng-class="{filled: star.filled}" ng-click="Ctrl.toggle($index)" ng-mouseenter="Ctrl.mouseEnter($index)" ng-mouseleave="Ctrl.mouseLeave($index)"> <span> <i class="fa fa-star"></i> </span> </li></ul> -->',
controllerAs: 'Ctrl',
};
});