add first version

wodka · Oct 18, 2016 · f1aa2a2 · f1aa2a2
commit f1aa2a2
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+angular-radios-to-slider
+===========
+[![Bower version](https://badge.fury.io/bo/angular-radios-to-slider.svg)](http://badge.fury.io/bo/angular-radios-to-slider)
+
+angular module for https://github.com/rubentd/radios-to-slider
+
+### Installation
+
+```
+bower install angular-radios-to-slider --save
+```
+
+### Usage
+
+add "radio.slider" to your modules and start using the directive.
+
+### Example
+
+```html
+<html ng-app="app">
+<body ng-controller="Controller as vm">
+<radio-slider values="vm.values" ng-model="vm.options"></radio-slider>
+</body>
+</html>
+
+<script>
+angular.module('app', ['radio.slider']).controller('Controller', Controller);
+
+function Controller() {
+	var vm = this;
+
+	vm.options = 'option4';
+
+	vm.values = {
+		'option1': '1 years',
+		'option2': '2 years',
+		'option3': '3 years',
+		'option4': '4 years',
+		'option5': '5+ years'
+	};
+}
+</script>
+```
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "angular-radios-to-slider",
+  "homepage": "https://github.com/wodka/angular-radios-to-slider",
+  "authors": [
+    "Michael Schramm <[email protected]>"
+  ],
+  "dependencies": {
+    "angular": ">=1.4.0",
+    "radios-to-slider": "#master"
+  },
+  "description": "angular module for rubentd/radios-to-slider",
+  "main": "src/radioSlider.js",
+  "keywords": [
+    "radio",
+    "slider",
+    "angular",
+    "jquery"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/src/radioSlider.js b/src/radioSlider.js
@@ -0,0 +1,37 @@
+(function (angular) {
+    angular.module('radio.slider', [])
+        .directive('radioSlider', radioSlider)
+    ;
+
+    radioSlider.$inject = ['$timeout'];
+    function radioSlider ($timeout) {
+        var idx = 0;
+
+        return {
+            restrict: 'E',
+            scope: {
+                ngModel: '=',
+                name: '=?',
+                values: '='
+            },
+            template: '<div>'+
+            '<input name="{{name}}" id="{{name}}_{{value}}" type="radio" ng-model="ngModel" ng-repeat-start="(value, label) in values" value="{{value}}">'+
+            '<label for="{{name}}_{{value}}" ng-repeat-end>{{label}}</label>'+
+            '</div>',
+            link: function (scope, element) {
+                if (!scope.name) {
+                    scope.name = 'radio_slider_'+(idx++);
+                }
+
+                $timeout(function () {
+                    element.find('div').first().radiosToSlider({
+                        onSelect: function (radio) {
+                            scope.ngModel = radio.val();
+                            scope.$apply();
+                        }
+                    });
+                }, 150);
+            }
+        };
+    }
+}(angular));