Question

我正在使用ng-repeat来设置我需要的所有行，但我也有一些输入。但是，我需要区分每一行，以便如果选中一个复选框，则不会像现在那样选择其他复选框。我相信我在这里错过了一些简单的东西，但它并没有找到我。我的代码：

questions = []
for q in queue.get_questions():
    options = []
    for o in q.get_options():
        options.append({"title": o.title, "votes": o.votes})
    questions.append({"title": q.title,
                      "votes": q.get_total_votes(),
                      "options": options})

Answer 1

模型应该引用循环数组中的项目

<tbody ng-repeat="benefit in oe.oeBenefits">
    <tr>
        <td><input type="checkbox" name="beneElect" data-ng-value="false" ng-model="benefit.deleted"></td>
        <td>{{ benefit.benefitName }}</td>
        <td><input type="number" name="amount" class="form-control" id="claimAmount" data-ng-model="benefit.annualElection" ng-required="true" navia-min="0.01" navia-max="10000" ng-pattern="/^\d*(\.\d{0,2})?$/"></td>
        <td>{{benefit.numberOfContributions}}</td>
        <td><input type="checkbox" name="beneElect" data-ng-value="false" ng-model="benefit.isDebitCard"></td>
    </tr>
</tbody>

更改模型的位置后，您访问它们的方式也应该更新。

Answer 2

这是工作demo。您只需将输入模型移动到益处数组的一部分。

<强> HTML

<body ng-app="myApp" ng-controller="myCtrl">
 <form class="beneEnroll" name="enrollForm" novalidate ng-model="electionData">
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th>your plan year election</th>
                <th>pay check deduction amount</th>
                <th>NaviCard (no cost)</th>
                <th></th>
            </tr>
        </thead>
        <tbody ng-repeat="benefit in oe.oeBenefits">
            <tr>
                <td><input type="checkbox" name="beneElect" data-ng-value="false" ng-model="benefit.deleted"></td>
                <td>{{ benefit.benefitName }}</td>
                <td><input type="number" name="amount" class="form-control" id="claimAmount" data-ng-model="benefit.annualElection" ng-required="true" navia-min="0.01" navia-max="10000" ng-pattern="/^\d*(\.\d{0,2})?$/"></td>
                <td>{{benefit.numberOfContributions}}</td>
                <td><input type="checkbox" name="beneElect" data-ng-value="false" ng-model="benefit.isDebitCard"></td>
            </tr>
        </tbody>
    </table>
</form>
</body>

<强> JS

angular.module('myApp',[])
  .controller('myCtrl', function ($scope) {

  $scope.oe = {oeBenefits : [
      {
        benefitName: 'benefit1',
        numberOfContributions: 10,
        deleted : false,
        annualElection:100, 
        isDebitCard: false 
      },
      {
        benefitName: 'benefit2',
        numberOfContributions: 20,
        deleted : false,
        annualElection:100, 
        isDebitCard: false 
      },
      {
        benefitName: 'benefit3',
        numberOfContributions: 30,
        deleted : false,
        annualElection:100, 
        isDebitCard: false 
      }
    ]}
  });

Answer 3

您正在将ng-model绑定到相同的值，即electInfo.deleted。因此，每次更改electInfo.deleted的值时，所有复选框都只反映此值。

要做你要求的事，你需要把它分成指令。这样，创建的每个指令都将具有独立的范围，并且彼此独立。

Angular ng-repeat创建表问题

3 个答案: