JSFiddle - React, Tailwind, and code Playground

by Oliver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div data-ng-app="myApp" ng-strict-di>
    <div data-ng-controller="myController">
        <!-- If you remove data-ng-options here, it won't work. -->
        <select as-relative-ranking data-ng-model="myRating" data-ng-options='relativeRating.description for relativeRating in _asRelativeRatingOptions track by relativeRating.value'>
        </select>
        <hr>
        <tt>MyRating: {{myRating}}</tt>
        <br>
        <tt>Options: {{_asRelativeRatingOptions}}</tt>
    </div>
</div>

JavaScript

var app = angular.module('myApp', [])

app.directive('asRelativeRanking', [function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            var relativeRatingOptions = [{
                description: 'Good',
                value: 1
            }, {
                description: 'Better',
                value: 2
            }];

            scope._asRelativeRatingOptions = relativeRatingOptions;

            // ToDo: Set the data-ng-options value a way that lets angular really use it.
            element.attr('data-ng-options', 'relativeRating.description for relativeRating in _asRelativeRatingOptions track by relativeRating.value');

            // format text going to user (model to view)
            ngModel.$formatters.push(function(value) {
                return value == null ? value : relativeRatingOptions.filter(function(relativeRating) {
                    return relativeRating.value === value;
                })[0];
            });

            // format text from the user (view to model)
            ngModel.$parsers.push(function(option) {
                return option == null ? option : option.value;
            });
        }
    }
}]);


app.controller('myController', ['$scope', function($scope) {
    $scope.myRating = 2;
}]);