Question

我正在使用MEAN Stack进行一个项目，并且仍在学习AngularJS的各个部分。我有一个表格，我可以从用户那里填写。它包含一系列复选框，用于选择学生并将其存储在数组中。对于每个学生，我打算为该学生提取2个值（正确答案，错误答案）。如何将这两个输入建模为两个变量并获取控制器中的值？

问题是，如果有一次，我选择3名学生，将会有3对正确和错误的答案。如果其他时间我选择了不同的学生，我该如何将答案映射到这些学生？

View.html：

<label ng-repeat="studentA1 in studentsA1">
                <input 
                 type="checkbox"
                 ng-model="selectedStudentsA1"
                 ng-checked="existA1(studentA1)"
                 value="studentA1"
                 ng-click="toggleSelectionA1(studentA1)">
                 {{studentA1}}
</label>
{{selectedStudentsA1}}

<div class="col-md-3">
    <h6>Correct Answers</h6>
    <input type="number" min="0" name="correctAnswers" ng-model="correctAnswers" required>
</div>
<div class="col-md-3">
    <h6>Incorrect Answers</h6>
    <input type="number" name="incorrectAnswers" ng-model="incorrectAnswers" min="0" required>
</div>

Controller.js：

    $scope.studentsA1 = ['Akhilesh', 'Prathamesh', 'Mandar', 'Sunmay'];

    $scope.selectedStudentsA1 = [];

    $scope.existA1 = function(item) {
        return $scope.selectedStudentsA1.indexOf(item) > -1;
    };

    $scope.toggleSelectionA1 = function(item) {
        var idx = $scope.selectedStudentsA1.indexOf(item);
        if (idx > -1) {
            $scope.selectedStudentsA1.splice(idx, 1);
        } else {
            $scope.selectedStudentsA1.push(item);
        }
    };

    $scope.checkAllA1 = function() {
        if ($scope.selectAllA1) {
            angular.forEach($scope.studentsA1, function(item) {
                var idx = $scope.selectedStudentsA1.indexOf(item);
                if(idx >= 0) {
                    return true;
                } else {
                    $scope.selectedStudentsA1.push(item);
                }
            });
        } else {
            $scope.selectedStudentsA1 = [];
        }
    };

Answer 1

检查这是否对您有所帮助我为你做了一个小提琴如果你看得更多，请评论他们

在View Side

<div ng-app ng-controller="mainController">
  <table>
    <tr>
      <th>
        <input type="checkbox" ng-model="selectAll" ng-click="selectAllCheckBox(selectAll)">
      </th>
      <th>Name</th>
      <th>Correct</th>
      <th>Wrong</th>
    </tr>
    <tr ng-repeat="studentA1 in studentsA1">
      <td>
        <input type="checkbox" ng-model="studentA1.selected">
      </td>
      <td> {{studentA1.Name}}</td>
      <td>
        <input type="number" ng-model="studentA1.Correct" />
      </td>
      <td>
        <input type="number" ng-model="studentA1.Wrong" />
      </td>\
    </tr>
  </table>
  <br> {{selectedStudentsA1}}
  <a ng-click="selectedStudents()">Submit</a>
</div>

在控制器端

function mainController($scope) {
  $scope.studentsA1 = [{
    selected: false,
    Name: 'Akhilesh',
    Correct: '',
    Wrong: ''
  }, {
    selected: false,
    Name: 'Prathamesh',
    Correct: '',
    Wrong: ''
  }, {
    selected: false,
    Name: 'Mandar',
    Correct: '',
    Wrong: ''
  }, {
    selected: false,
    Name: 'Sunmay',
    Correct: '',
    Wrong: ''
  }];

  $scope.selectedStudents = function() {
    $scope.selectedStudentsA1 = $scope.studentsA1.filter(i => i.selected == true);
    $scope.correctAnswers = $scope.selectedStudentsA1.length;
    $scope.incorrectAnswers = $scope.studentsA1.length -                 $scope.selectedStudentsA1.length;
  }
  $scope.selectAllCheckBox = function(value) {
    $scope.studentsA1.forEach(function(item) {
      item.selected = value;
    });
  }

}

https://jsfiddle.net/athulnair/9r8sbwx4/

AngularJS：获取同一变量的多个值

1 个答案: