角度 ng 重复以创建表格问题

Angular ng-repeat to create a table issue

本文关键字：创建 表格 问题 ng 角度      更新时间：2023-09-26

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

<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="electInfo.deleted"></td>
                <td>{{ benefit.benefitName }}</td>
                <td><input type="number" name="amount" class="form-control" id="claimAmount" data-ng-model="electInfo.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="electInfo.isDebitCard"></td>
            </tr>
        </tbody>
    </table>
</form>

模型应引用正在循环的数组中的项

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

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

这是工作演示。您只需要将输入模型移动到收益数组的一部分。

.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 
      }
    ]}
  });

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

要执行您的要求，您需要将其分离为指令。 这样，创建的每个指令将具有隔离的作用域，并且彼此独立。

相关文章：