aLight, rating example

CoffeeScript, filter-generator

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.49b.min.js"></script>
<div id="app" al-init="rating=5; max=10">
  Rating is {{rating}} <br/>
  Clickable Rating <br/>
  <div al-rating="rating"></div>
  <br/>
  Readonly rating <br/>
  <div al-rating="rating" readonly></div>
</div>

CSS

.rating{
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}

ul.rating {
  display: inline-block;
}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating .filled {
  color: #21568b;
}

CoffeeScript

alight.directives.al.rating =
    template: '<ul class="rating"><li al-repeat="_ in max | generator" al-css="filled: $index<rating" al-click="mark($index+1)">\u2605</li></ul>'
    scope: true
    link: (element, name, scope) ->
        scope.mark = (point) ->
            if not $(element).attr('readonly')
                scope.$parent.$setValue name, point

alight.applyBindings null, $('#app')[0]  # fix jsfiddle bug, autostart