AngularJS - このコードで必要なチェックボックスの少なくとも1つを選択するにはどうすればよいですか？チェックボックスの少なくとも一つ（月 - 日）の選択にする方法

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

あなたはwheatherテストあなたのチェックボックスをng-requiredディレクティブを使用することができますいくつかのチェスがありますオブジェクトのcked値。もしそうなら、これはもう不要です。これは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> 

コントローラー：またng-requiredの条件に最初ラディを追加することもでき

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

：

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

Answer 2

私はあなたに2 posibilitiesを与えます。

あなたはチェックボックスがディレクティブは、ブール値にバインドさあなたがNGの場合に、使用することができますラジオボタンに応じて表示/非表示したい場合。

<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]">