I used the ng-repeat in the ion-slide and operated the array myTags in the controller，ion-slide-tab-label was custom directive.When I changed the array，ng-repeat view has not changed.If I use the method remove() and then add() the same tag,it would be error：duplicate. Here's the code.
slidingTabsDirective.js
var slidingTabsDirective = angular.module("ionic").directive('ionSlideTabs', ['$timeout', '$compile', '$interval', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$ionicGesture', function($timeout, $compile, $interval, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicGesture) {
return {
require: "^ionSlideBox",
restrict: 'A',
link: function(scope, element, attrs, parent) {
var ionicSlideBoxDelegate;
var ionicScrollDelegate;
var ionicScrollDelegateID;
var slideTabs;
var indicator;
var slider;
var tabsBar;
var options = {
"slideTabsScrollable": true
};
var init = function() {
if (angular.isDefined(attrs.slideTabsScrollable) && attrs.slideTabsScrollable == false) {
options.slideTabsScrollable = false;
}
var tabItems = '<li ng-repeat="(key, value) in tabs" ng-click="onTabTabbed($event, {{key}})" class="slider-slide-tab" ng-bind-html="value"></li>';
if (options.slideTabsScrollable) {
//alert(options.slideTabsScrollable)
ionicScrollDelegateID = "ion-slide-tabs-handle-" + Math.floor((Math.random() * 10000) + 1);
tabsBar = angular.element('<ion-scroll delegate-handle="' + ionicScrollDelegateID + '" class="slidingTabs" direction="x" scrollbar-x="false"><ul>' + tabItems + '</ul> <div class="tab-indicator-wrapper"><div class="tab-indicator"></div></div> </ion-scroll>');
} else {
tabsBar = angular.element('<div class="slidingTabs"><ul>' + tabItems + '</ul> <div class="tab-indicator-wrapper"><div class="tab-indicator"></div></div> </div>');
}
slider = angular.element(element);
var compiled = $compile(tabsBar);
slider.parent().prepend(tabsBar);
compiled(scope);
//get Tabs DOM Elements
indicator = angular.element(tabsBar[0].querySelector(".tab-indicator"));
//get the slideBoxHandle
var slideHandle = slider.attr('delegate-handle');
var scrollHandle = tabsBar.attr('delegate-handle');
ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
if (slideHandle) {
ionicSlideBoxDelegate = ionicSlideBoxDelegate.$getByHandle(slideHandle);
}
if (options.slideTabsScrollable) {
ionicScrollDelegate = $ionicScrollDelegate;
if (scrollHandle) {
ionicScrollDelegate = ionicScrollDelegate.$getByHandle(scrollHandle);
}
}
addEvents();
setTabBarWidth();
slideToCurrentPosition();
};
var addEvents = function() {
ionic.onGesture("dragleft", scope.onSlideMove, slider[0]);
ionic.onGesture("dragright", scope.onSlideMove, slider[0]);
ionic.onGesture("release", scope.onSlideChange, slider[0]);
};
var setTabBarWidth = function() {
if (!angular.isDefined(slideTabs) || slideTabs.length == 0) {
return false;
}
tabsList = tabsBar.find("ul");
var tabsWidth = 0;
angular.forEach(slideTabs, function(currentElement, index) {
var currentLi = angular.element(currentElement);
tabsWidth += currentLi[0].offsetWidth;
});
if (options.slideTabsScrollable) {
angular.element(tabsBar[0].querySelector(".scroll")).css("width", tabsWidth + 1 + "px");
} else {
slideTabs.css("width", tabsList[0].offsetWidth / slideTabs.length + "px");
}
slideToCurrentPosition();
};
var slideToCurrentPosition = function() {
if (!angular.isDefined(slideTabs) || slideTabs.length == 0) {
return false;
}
var targetSlideIndex = ionicSlideBoxDelegate.currentIndex();
var targetTab = angular.element(slideTabs[targetSlideIndex]);
var targetLeftOffset = targetTab.prop("offsetLeft");
var targetWidth = targetTab[0].offsetWidth;
indicator.css({
"-webkit-transition-duration": "300ms",
"-webkit-transform": "translate(" + targetLeftOffset + "px,0px)",
"width": targetWidth + "px"
});
if (options.slideTabsScrollable && ionicScrollDelegate) {
var scrollOffset = 40;
ionicScrollDelegate.scrollTo(targetLeftOffset - scrollOffset, 0, true);
}
slideTabs.removeClass("tab-active");
targetTab.addClass("tab-active");
};
var setIndicatorPosition = function(currentSlideIndex, targetSlideIndex, position, slideDirection) {
var targetTab = angular.element(slideTabs[targetSlideIndex]);
var currentTab = angular.element(slideTabs[currentSlideIndex]);
var targetLeftOffset = targetTab.prop("offsetLeft");
var currentLeftOffset = currentTab.prop("offsetLeft");
var offsetLeftDiff = Math.abs(targetLeftOffset - currentLeftOffset);
if (currentSlideIndex == 0 && targetSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "right" ||
targetSlideIndex == 0 && currentSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "left") {
return;
}
var targetWidth = targetTab[0].offsetWidth;
var currentWidth = currentTab[0].offsetWidth;
var widthDiff = targetWidth - currentWidth;
var indicatorPos = 0;
var indicatorWidth = 0;
if (currentSlideIndex > targetSlideIndex) {
indicatorPos = targetLeftOffset - (offsetLeftDiff * (position - 1));
indicatorWidth = targetWidth - ((widthDiff * (1 - position)));
} else if (targetSlideIndex > currentSlideIndex) {
indicatorPos = targetLeftOffset + (offsetLeftDiff * (position - 1));
indicatorWidth = targetWidth + ((widthDiff * (position - 1)));
}
indicator.css({
"-webkit-transition-duration": "0ms",
"-webkit-transform": "translate(" + indicatorPos + "px,0px)",
"width": indicatorWidth + "px"
});
if (options.slideTabsScrollable && ionicScrollDelegate) {
var scrollOffset = 40;
ionicScrollDelegate.scrollTo(indicatorPos - scrollOffset, 0, false);
}
};
scope.onTabTabbed = function(event, index) {
ionicSlideBoxDelegate.slide(index);
slideToCurrentPosition();
};
scope.tabs = [];
scope.addTabContent = function($content) {
$content = $content.replace(/\“/g, '').replace(/\”/g, '');
scope.tabs.push($content);
scope.$apply();
$timeout(function() {
slideTabs = angular.element(tabsBar[0].querySelector("ul").querySelectorAll(".slider-slide-tab"));
slideToCurrentPosition();
setTabBarWidth();
});
};
scope.onSlideChange = function(slideIndex) {
slideToCurrentPosition();
};
scope.onSlideMove = function() {
var scrollDiv = slider[0].getElementsByClassName("slider-slide");
var currentSlideIndex = ionicSlideBoxDelegate.currentIndex();
var currentSlide = angular.element(scrollDiv[currentSlideIndex]);
var currentSlideLeftOffset = currentSlide.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',')[0];
var targetSlideIndex = (currentSlideIndex + 1) % scrollDiv.length;
if (currentSlideLeftOffset > slider.prop("offsetLeft")) {
targetSlideIndex = currentSlideIndex - 1;
if (targetSlideIndex < 0) {
targetSlideIndex = scrollDiv.length - 1;
}
}
var targetSlide = angular.element(scrollDiv[targetSlideIndex]);
var position = currentSlideLeftOffset / slider[0].offsetWidth;
var slideDirection = position > 0 ? "right" : "left";
position = Math.abs(position);
setIndicatorPosition(currentSlideIndex, targetSlideIndex, position, slideDirection);
};
init();
},
controller: ['$scope', function($scope) {
this.addTab = function($content) {
$timeout(function() {
if ($scope.addTabContent) {
$scope.addTabContent($content);
}
});
};
}]
};
}]);
slidingTabsDirective.directive('ionSlideTabLabel', [function() {
return {
require: "^ionSlideTabs",
link: function($scope, $element, $attrs, $parent) {
$parent.addTab($attrs.ionSlideTabLabel);
}
};
}]);
index.html
<ion-slide-box id="slide_box" show-pager="false" ion-slide-tabs>
<ion-slide ng-repeat="tag in myTags track by $index" ion-slide-tab-label=“{{tag.tagname}}”>
.........
</ion-slide>
</ion-slide-box>
service.js
function getTags() {
var url = xxxxxxx;
return $http({
method: 'GET',
url: url
})
.success(function(res) {
//console.log('is collect success');
})
.error(function(msg, code) {
console.log('tag error.....', code);
});
}
indexCtrl.js
$scope.tags = [];
$scope.myTags = [];
$scope.moreTags = [];
function getTags() {
ds.getTags()
.then(function(res) {
var traTags = [];
var l = res.data.length;
$scope.tags = res.data;
traTags = angular.copy($scope.tags);
$scope.myTags = traTags.splice(0, l / 2);
$scope.moreTags = traTags;
});
}
function remove(index) {
if (!$scope.lock) {
$scope.moreTags.unshift($scope.myTags[index]);
$scope.myTags.splice(index, 1);
} else {
return;
}
}
function add(index) {
$scope.myTags.push($scope.moreTags[index]);
$scope.moreTags.splice(index, 1);
}
what should I do? please help me! Thank you!
function:
function addlist(obj, item, addtype) {
var isdata = false;
for (var i = 0; i < obj.length; i++) {
if (obj[i] == item) {
isdata = true;
break;
}
}
if (!isdata) {
if (addtype) {
obj.push(item);
} else {
obj.unshift(item);
}
}
}
code:
function remove(index) {
if (!$scope.lock) {
addlist($scope.moreTags,$scope.myTags[index],false);
$scope.myTags.splice(index, 1);
} else {
return;
}
}
function add(index) {
addlist($scope.myTags,$scope.moreTags[index],true);
$scope.moreTags.splice(index, 1);
}
I want to convert number into words. Like 234 in word would be 2 hundred thirty-four. Similarly 1000 will be one thousand. Similarly 100 means one hundred.
Is there any library for this in angularjs. If then how we will write in angularjs directive/service so that we can use it again..
Create a words filter.
I got the "toWords" algorithm from this blog post: http://ravindersinghdang.blogspot.com/2013/04/convert-numbers-into-words-using.html
var app = angular.module('app',[]);
app.filter('words', function() {
function isInteger(x) {
return x % 1 === 0;
}
return function(value) {
if (value && isInteger(value))
return toWords(value);
return value;
};
});
var th = ['','thousand','million', 'billion','trillion'];
var dg = ['zero','one','two','three','four', 'five','six','seven','eight','nine'];
var tn = ['ten','eleven','twelve','thirteen', 'fourteen','fifteen','sixteen', 'seventeen','eighteen','nineteen'];
var tw = ['twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];
function toWords(s)
{
s = s.toString();
s = s.replace(/[\, ]/g,'');
if (s != parseFloat(s)) return 'not a number';
var x = s.indexOf('.');
if (x == -1) x = s.length;
if (x > 15) return 'too big';
var n = s.split('');
var str = '';
var sk = 0;
for (var i=0; i < x; i++)
{
if ((x-i)%3==2)
{
if (n[i] == '1')
{
str += tn[Number(n[i+1])] + ' ';
i++;
sk=1;
}
else if (n[i]!=0)
{
str += tw[n[i]-2] + ' ';
sk=1;
}
}
else if (n[i]!=0)
{
str += dg[n[i]] +' ';
if ((x-i)%3==0) str += 'hundred ';
sk=1;
}
if ((x-i)%3==1)
{
if (sk) str += th[(x-i-1)/3] + ' ';
sk=0;
}
}
if (x != s.length)
{
var y = s.length;
str += 'point ';
for (var i=x+1; i<y; i++) str += dg[n[i]] +' ';
}
return str.replace(/\s+/g,' ');
}
window.toWords = toWords;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app">
<input type="text" ng-model="name" /> {{name | words}}
</div>
I have done this for Angular 8.
It also works for float/double numbers.
I am trying to implement angular-slider using angularJS v-1.2.20.
<div ng-controller="ItemCtrl">
<slider custom-floor="item.minAge" floor="100" custom-ceiling="item.maxAge" ceiling="1000" step="10" precision="2" ng-model="item.cost"></slider>
</div>
After including all necessary js and css files, the slider is shown but the floor and ceiling values(and also custom floor and custom ceiling values) are not getting displayed.
There is no error in console. But when I used angular v-1.1.4 in the script without changing any code, everything seems to work fine.
Does anybody know about this issue. Any workaround if I need to use slider with angular v-1.2.20.?
Thanks for Help!
First of all sorry for my english,the ng-bind-html-unsafe was deleted of angular js so we now need to use directly "{{}}" in html code i just change attribute by a call in html and angular slider works with at least angular 1.2.9 that i used, here a complete exemple.
<!DOCTYPE html>
<html ng-app="APP">
<head>
<meta charset="UTF-8">
<title>angular-slider example</title>
<link rel="stylesheet" href="http://www.directiv.es/application/html/js/prajwalkman/angular-slider/angular-slider.min.css" media="all">
</head>
<body>
<div style="width:600px;" ng-controller="ItemCtrl">
<slider floor="0" ceiling="100" step="1" precision="2" ng-model="cost"></slider>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>// Generated by CoffeeScript 1.6.2
(function() {
var MODULE_NAME, SLIDER_TAG, angularize, bindHtml, gap, halfWidth, hide, inputEvents, module, offset, offsetLeft, pixelize, qualifiedDirectiveDefinition, roundStep, show, sliderDirective, width;
MODULE_NAME = 'uiSlider';
SLIDER_TAG = 'slider';
angularize = function(element) {
return angular.element(element);
};
pixelize = function(position) {
return "" + position + "px";
};
hide = function(element) {
return element.css({
opacity: 0
});
};
show = function(element) {
return element.css({
opacity: 1
});
};
offset = function(element, position) {
return element.css({
left: position
});
};
halfWidth = function(element) {
return element[0].offsetWidth / 2;
};
offsetLeft = function(element) {
return element[0].offsetLeft;
};
width = function(element) {
return element[0].offsetWidth;
};
gap = function(element1, element2) {
return offsetLeft(element2) - offsetLeft(element1) - width(element1);
};
bindHtml = function(element, html) {
};
roundStep = function(value, precision, step, floor) {
var decimals, remainder, roundedValue, steppedValue;
if (floor == null) {
floor = 0;
}
if (step == null) {
step = 1 / Math.pow(10, precision);
}
remainder = (value - floor) % step;
steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
decimals = Math.pow(10, precision);
roundedValue = steppedValue * decimals / decimals;
return roundedValue.toFixed(precision);
};
inputEvents = {
mouse: {
start: 'mousedown',
move: 'mousemove',
end: 'mouseup'
},
touch: {
start: 'touchstart',
move: 'touchmove',
end: 'touchend'
}
};
sliderDirective = function($timeout) {
return {
restrict: 'EA',
scope: {
floor: '#',
ceiling: '#',
step: '#',
precision: '#',
ngModel: '=?',
ngModelLow: '=?',
ngModelHigh: '=?',
translate: '&'
},
template: '<span class="bar"></span><span class="bar selection"></span><span class="pointer"></span><span class="pointer"></span><span class="bubble selection"></span><span class="bubble limit"> {{floor}}</span><span class="bubble limit">{{ ceiling}}</span><span class="bubble">{{ngModel}}</span><span class="bubble"></span><span class="bubble"></span>',
compile: function(element, attributes) {
var ceilBub, cmbBub, e, flrBub, fullBar, highBub, lowBub, maxPtr, minPtr, range, refHigh, refLow, selBar, selBub, watchables, _i, _len, _ref, _ref1;
if (attributes.translate) {
attributes.$set('translate', "" + attributes.translate + "(value)");
}
range = (attributes.ngModel == null) && ((attributes.ngModelLow != null) && (attributes.ngModelHigh != null));
_ref = (function() {
var _i, _len, _ref, _results;
_ref = element.children();
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
e = _ref[_i];
_results.push(angularize(e));
}
return _results;
})(), fullBar = _ref[0], selBar = _ref[1], minPtr = _ref[2], maxPtr = _ref[3], selBub = _ref[4], flrBub = _ref[5], ceilBub = _ref[6], lowBub = _ref[7], highBub = _ref[8], cmbBub = _ref[9];
refLow = range ? 'ngModelLow' : 'ngModel';
refHigh = 'ngModelHigh';
bindHtml(selBub, "'Range: ' + translate({value: diff})");
bindHtml(lowBub, "translate({value: " + refLow + "})");
bindHtml(highBub, "translate({value: " + refHigh + "})");
bindHtml(cmbBub, "translate({value: " + refLow + "}) + ' - ' + translate({value: " + refHigh + "})");
if (!range) {
_ref1 = [selBar, maxPtr, selBub, highBub, cmbBub];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
element = _ref1[_i];
element.remove();
}
}
watchables = [refLow, 'floor', 'ceiling'];
if (range) {
watchables.push(refHigh);
}
return {
post: function(scope, element, attributes) {
var barWidth, boundToInputs, dimensions, maxOffset, maxValue, minOffset, minValue, ngDocument, offsetRange, pointerHalfWidth, updateDOM, valueRange, w, _j, _len1;
boundToInputs = false;
ngDocument = angularize(document);
if (!attributes.translate) {
scope.translate = function(value) {
return value.value;
};
}
pointerHalfWidth = barWidth = minOffset = maxOffset = minValue = maxValue = valueRange = offsetRange = void 0;
dimensions = function() {
var value, _j, _len1, _ref2, _ref3;
if ((_ref2 = scope.precision) == null) {
scope.precision = 0;
}
if ((_ref3 = scope.step) == null) {
scope.step = 1;
}
for (_j = 0, _len1 = watchables.length; _j < _len1; _j++) {
value = watchables[_j];
scope[value] = roundStep(parseFloat(scope[value]), parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
}
scope.diff = roundStep(scope[refHigh] - scope[refLow], parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
pointerHalfWidth = halfWidth(minPtr);
barWidth = width(fullBar);
minOffset = 0;
maxOffset = barWidth - width(minPtr);
minValue = parseFloat(attributes.floor);
maxValue = parseFloat(attributes.ceiling);
valueRange = maxValue - minValue;
return offsetRange = maxOffset - minOffset;
};
updateDOM = function() {
var adjustBubbles, bindToInputEvents, fitToBar, percentOffset, percentToOffset, percentValue, setBindings, setPointers;
dimensions();
percentOffset = function(offset) {
return ((offset - minOffset) / offsetRange) * 100;
};
percentValue = function(value) {
return ((value - minValue) / valueRange) * 100;
};
percentToOffset = function(percent) {
return pixelize(percent * offsetRange / 100);
};
fitToBar = function(element) {
return offset(element, pixelize(Math.min(Math.max(0, offsetLeft(element)), barWidth - width(element))));
};
setPointers = function() {
var newHighValue, newLowValue;
offset(ceilBub, pixelize(barWidth - width(ceilBub)));
newLowValue = percentValue(scope[refLow]);
offset(minPtr, percentToOffset(newLowValue));
offset(lowBub, pixelize(offsetLeft(minPtr) - (halfWidth(lowBub)) + pointerHalfWidth));
if (range) {
newHighValue = percentValue(scope[refHigh]);
offset(maxPtr, percentToOffset(newHighValue));
offset(highBub, pixelize(offsetLeft(maxPtr) - (halfWidth(highBub)) + pointerHalfWidth));
offset(selBar, pixelize(offsetLeft(minPtr) + pointerHalfWidth));
selBar.css({
width: percentToOffset(newHighValue - newLowValue)
});
offset(selBub, pixelize(offsetLeft(selBar) + halfWidth(selBar) - halfWidth(selBub)));
return offset(cmbBub, pixelize(offsetLeft(selBar) + halfWidth(selBar) - halfWidth(cmbBub)));
}
};
adjustBubbles = function() {
var bubToAdjust;
fitToBar(lowBub);
bubToAdjust = highBub;
if (range) {
fitToBar(highBub);
fitToBar(selBub);
if (gap(lowBub, highBub) < 10) {
hide(lowBub);
hide(highBub);
fitToBar(cmbBub);
show(cmbBub);
bubToAdjust = cmbBub;
} else {
show(lowBub);
show(highBub);
hide(cmbBub);
bubToAdjust = highBub;
}
}
if (gap(flrBub, lowBub) < 5) {
hide(flrBub);
} else {
if (range) {
if (gap(flrBub, bubToAdjust) < 5) {
hide(flrBub);
} else {
show(flrBub);
}
} else {
show(flrBub);
}
}
if (gap(lowBub, ceilBub) < 5) {
return hide(ceilBub);
} else {
if (range) {
if (gap(bubToAdjust, ceilBub) < 5) {
return hide(ceilBub);
} else {
return show(ceilBub);
}
} else {
return show(ceilBub);
}
}
};
bindToInputEvents = function(pointer, ref, events) {
var onEnd, onMove, onStart;
onEnd = function() {
pointer.removeClass('active');
ngDocument.unbind(events.move);
return ngDocument.unbind(events.end);
};
onMove = function(event) {
var eventX, newOffset, newPercent, newValue;
eventX = event.clientX || event.touches[0].clientX;
newOffset = eventX - element[0].getBoundingClientRect().left - pointerHalfWidth;
newOffset = Math.max(Math.min(newOffset, maxOffset), minOffset);
newPercent = percentOffset(newOffset);
newValue = minValue + (valueRange * newPercent / 100.0);
if (range) {
if (ref === refLow) {
if (newValue > scope[refHigh]) {
ref = refHigh;
minPtr.removeClass('active');
maxPtr.addClass('active');
}
} else {
if (newValue < scope[refLow]) {
ref = refLow;
maxPtr.removeClass('active');
minPtr.addClass('active');
}
}
}
newValue = roundStep(newValue, parseInt(scope.precision), parseFloat(scope.step), parseFloat(scope.floor));
scope[ref] = newValue;
return scope.$apply();
};
onStart = function(event) {
pointer.addClass('active');
dimensions();
event.stopPropagation();
event.preventDefault();
ngDocument.bind(events.move, onMove);
return ngDocument.bind(events.end, onEnd);
};
return pointer.bind(events.start, onStart);
};
setBindings = function() {
var bind, inputMethod, _j, _len1, _ref2, _results;
boundToInputs = true;
bind = function(method) {
bindToInputEvents(minPtr, refLow, inputEvents[method]);
return bindToInputEvents(maxPtr, refHigh, inputEvents[method]);
};
_ref2 = ['touch', 'mouse'];
_results = [];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
inputMethod = _ref2[_j];
_results.push(bind(inputMethod));
}
return _results;
};
setPointers();
adjustBubbles();
if (!boundToInputs) {
return setBindings();
}
};
$timeout(updateDOM);
for (_j = 0, _len1 = watchables.length; _j < _len1; _j++) {
w = watchables[_j];
scope.$watch(w, updateDOM);
}
return window.addEventListener("resize", updateDOM);
}
};
}
};
};
qualifiedDirectiveDefinition = ['$timeout', sliderDirective];
module = function(window, angular) {
return angular.module(MODULE_NAME, []).directive(SLIDER_TAG, qualifiedDirectiveDefinition);
};
module(window, window.angular);
}).call(this);</script>
<script>
app = angular.module('APP', ['uiSlider']);
app.controller('ItemCtrl', ['$scope', function($scope) {
$scope.cost = 0
}]);
</script>
</body>
</html>