Question

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

这是我提供工作日的控制器

$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复选复选框？

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

所以我的控制器看起来像这样

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

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

我希望你们能帮助我。如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $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];
  $scope.myData = $scope.selectedDays;

  $scope.getData = function(Day) {
    var index = $scope.myData.indexOf(Day);

    if (index < 0) {
      $scope.myData.push(Day)
      console.log('myData', $scope.myData);
    } else {
      $scope.myData.splice(index, 1)
      console.log('myData', $scope.myData);
    }
  }
  $scope.IsChecked = function(Day) {


    var index = $scope.selectedDays.indexOf(Day);

    if (index > -1) {

      return true
    } else {
      return false
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.3.6" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <label>Working days</label>
  <div class="checkbox">
    <label ng-repeat="w in workDays" ng-model="myData">
      <input type="checkbox" ng-value="w.value" ng-click="getData(w.value)" ng-checked="IsChecked(w.value)" />{{w.name}}
    </label>
  </div>

</body>

</html>

固定。

Answer 2

向控制器添加一个函数并调用它来初始化模型（$ scope.myData），如下所示：

<强>控制器

$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。

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

2 个答案: