AngularJS - 如何选择此代码中所需的至少一个复选框？

Question

如果选中第一个单选按钮（在html标记中，不调用任何函数），如何选择至少一个复选框（周一 - 周日）？

截图 HTML代码片段（针对此问题进行了简化）

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
}

模型

showtext

Answer 1

您可以在复选框测试中使用ng-required指令，在您的对象上有一些选中的值，如果有，则不再需要它，例如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个可能性。

如果你想隐藏/显示取决于单选按钮的复选框，你可以使用绑定到布尔值的ng-if指令。

def counter(needle, haystack):
    if not haystack: 
        return 0

    # Splits the list into the first element and the remaining elements as a list.
    head, *rest = haystack

    if head != needle:
        return counter(needle, rest) + 1
    else:
        return counter(needle, rest)

如果要根据单选按钮禁用复选框，则可以使用ng-class。

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