Days of the Week Checklist

Angular Checkbox

by TheFiddler

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<div ng-app="app" ng-controller="Ctrl">
   <table class="table table-bordered table-hover table-condensed">
  
    <tr ng-repeat="day in userparttime">
      <td>
      
          {{ day.name }}
       
      </td>
      <td class="md-2">
        <span editable-select="day.status" e-name="status" e-ng-options="s.value as s.text for s in availability">
          {{ showPartTimeStatus(day) }}
        </span>
      </td>

    </tr>
  </table>

</div>

CSS

div[ng-app] { margin: 10px; }
.table {width: 100% }
form[editable-form] > div {margin: 10px 0;}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter, $http) {
 $scope.userparttime = [
    {id: 1, name: 'Sunday', status: 2},
    {id: 2, name: 'Monday', status: undefined},
    {id: 3, name: 'Tuesday', status: 2}
  ]; 

  $scope.availability = [
    {value: 1, text: '6am on'},
    {value: 2, text: 'Noon on'},
    {value: 3, text: '6pm on'},
    {value: 4, text: 'Midnight on'}
  ]; 

  $scope.showPartTimeStatus = function(userparttime) {
    var selected = [];
    if(userparttime.status) {
      selected = $filter('filter')($scope.availability, {value: userparttime.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

 

});