javascript - 自动选择并收集数组中的复选框值

Question

我在设置(检查)和从 View 中获取数据数组到模型时遇到问题。让我用代码进一步解释我的问题。

这是我的 Controller ，我在其中提供工作日

$scope.workDays = [
                {name: 'Monday', value: 1},
                {name: 'Tuesday', value: 2},
                {name: 'Wednesday', value: 3},
                {name: 'Thursday', value: 4},
                {name: 'Friday', value: 5},
                {name: 'Saturday', value: 6},
                {name: 'Sunday', value: 7},
            ]
$scope.selectedDays = "1,3,4,6";

然后我在 HTML 中使用 ng-repeat 渲染这些复选框

<label>Working days</label>
<div class="checkbox">
     <label ng-repeat="w in workDays" >
            <input type="checkbox" ng-value="w.value" ng-checked="selectedDays" >
            {{w.name}}&nbsp;&nbsp;
     </label>
</div>

1.问题:如何根据值 $scope.selectedDays 检查复选框？

我遇到的第二个问题是一旦我尝试获取新的选定值，我总是得到空数组

所以我的 Controller 看起来像这样

$scope.myData = [];
console.log($scope.myData);

然后我选择并取消选择一些复选框，但是控制台日志报告空数组[]

希望大家能帮帮我。如果您需要任何其他信息，请告诉我，我会提供。谢谢!

Answer 1

向 Controller 添加一个函数并调用它来初始化模型 ($scope.myData)，如下所示:

Controller

$scope.myData = [];
function getMyData() {
   angular.forEach($scope.workDays, function(day) {
     var newDay = {
       name: day.name,
       selected: $scope.selectedDays.indexOf(day.value) >= 0
     };
     $scope.myData.push(newDay);
   });
}

getMyData();

然后您可以像这样简化标记:

标记

<div class="checkbox">
  <label ng-repeat="w in myData">
    <input type="checkbox" ng-model="w.selected"> {{w.name}}&nbsp;&nbsp;
  </label>
</div>

你可以看到这个工作here 。