How to bind the model to a list of checkboxes in AngularJS?

Question

I need some help for proper binding the model to a list of checkboxes (Mon-Sun).

Any help is appreciated. Thanks.

SERVER Model

public class DailySchedule : ReportSchedule
{
    public string Option { get; set; }
    public Dictionary<string, bool> RunOnDays { get; set; }
}

JSON Data I receive from server comes in this format:

vm.reportSchedule
{
  "Option": "EveryWeekday",
  "RunOnDays": {
    "Mon": true,
    "Tue": true,
    "Wed": true,
    "Thu": true,
    "Fri": true,
    "Sat": false,
    "Sun": false
  }
}

HTML

<div class="form-group">
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Mon">Mon
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Tue">Tue
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Wed">Wed
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Thu">Thu
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Fri">Fri
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Sat">Sat
    <input type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays" value="Sun">Sun
</div>

tymeJV · Accepted Answer · 2017-03-20 19:42:27Z

2

Use an ngRepeat with the key/val syntax:

<div class="form-group">
    <input ng-repeat="(day, bool) in vm.reportSchedule.RunOnDays" type="checkbox" name="dailyOption" ng-model="vm.reportSchedule.RunOnDays[day]" />{{day}}
</div>

answered Mar 20, 2017 at 19:42

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind the model to a list of checkboxes in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related