AngularJS - 如何選擇此代碼中所需的至少一個複選框？

Question

如何選擇至少一個複選框（週一至週日）如果選擇第一個單選按鈕（在html標記中，不需要調用任何函數）？

截圖 HTML代碼片段（簡化了這個問題）

<input type="radio" name="dailyOption" 
     ng-model="vm.reportSchedule.DailyOption" value="FollowingDays"> 

<label ng-repeat="(day, bool) in vm.reportSchedule.DailyRunOnDays"> 
    <input type="checkbox" name="dailyRunOnDays" 
      ng-model="vm.reportSchedule.DailyRunOnDays[day]">{{day}} 
</label> 

<input type="radio" name="dailyOption" 
     ng-model="vm.reportSchedule.DailyOption" value="EveryWeekday"> 

<input type="radio" name="dailyOption" 
     ng-model="vm.reportSchedule.DailyOption" value="RepeatAfterDays"> 

模型

vm.reportSchedule 
{ 
    "AppId": "ReportScheduleId", 
    "Today": "2017-04-25T12:53:00Z", 
    "UserId": 7466897, 
    "ScheduleId": null, 
    "Name": null, 
    "Description": null, 
    "Type": "Daily", 
    "StartSchedule": "2017-04-25T12:53:00Z", 
    "StopSchedule": "2017-04-25T12:53:00Z", 
    "NextRunTime": null, 
    "LastRunTime": null, 
    "Permission": { 
    "FullAccess": true, 
    "View": true, 
    "Create": true, 
    "Update": true, 
    "Delete": true 
    }, 
    "RunEveryHours": 1, 
    "RunEveryMinutes": 1, 
    "DailyOption": "RepeatAfterDays", 
    "MonthlyOption": "CalendarDate", 
    "DailyRunOnDays": { 
    "Mon": false, 
    "Tue": false, 
    "Wed": false, 
    "Thu": false, 
    "Fri": false, 
    "Sat": false, 
    "Sun": false 
    }, 
    "WeeklyRunOnDays": { 
    "Mon": false, 
    "Tue": false, 
    "Wed": false, 
    "Thu": false, 
    "Fri": false, 
    "Sat": false, 
    "Sun": false 
    }, 
    "RepeatAfterDays": 1, 
    "RepeatAfterWeeks": 1, 
    "RepeatMonths": 1 
} 

Answer 1

您可以使用ng-required指令上的複選框測試wheather有一些車如果是這樣，它不再需要，就像這個ng-required="!vm.some(vm.reportSchedule.DailyRunOnDays)"。

模板：

<input type="radio" name="dailyOption" 
     ng-model="vm.reportSchedule.DailyOption" value="FollowingDays"> 

<label ng-repeat="(day, bool) in vm.reportSchedule.DailyRunOnDays"> 
    <input type="checkbox" name="dailyRunOnDays" 
      ng-model="vm.reportSchedule.DailyRunOnDays[day]" 
      ng-required="!vm.some(vm.reportSchedule.DailyRunOnDays)"> 
    {{day}} 
</label> 

控制器：

vm.some = function(obj){ 
    obj= obj|| {}; 
    return Object.keys(obj).some(function (key) { return obj[key]; }); 
}; 

您可能還需要到第一拉迪添加到有條件的ng-required：

vm.reportSchedule.DailyOption == FollowingDays && !vm.some(vm.reportSchedule.DailyRunOnDays) 

Answer 2

我給你2個posibilities。

如果要隱藏/顯示取決於單選按鈕的複選框，可以使用ng-if指令綁定到布爾值。

<input type="checkbox" ng-if="vm.reportSchedule.DailyOption ===true" name="dailyRunOnDays" 
      ng-model="vm.reportSchedule.DailyRunOnDays[day]"> 

如果你想禁用取決於單選按鈕的複選框，你可以使用ng-class。

<input type="checkbox" ng-class="{disabled: vm.reportSchedule.DailyOption === false}" name="dailyRunOnDays" 
      ng-model="vm.reportSchedule.DailyRunOnDays[day]">