Question

我想从AngularJS中的表中删除一行。表中的数据来自api.json文件。如果我单击复选框，然后单击删除按钮，则应将其删除。另外，我想限制选择。假设，如果我点击第一行中的复选框，那么如果我点击任何其他行，它将被取消选中。所以，有一次，应该只选择一行。这是plnkr链接： -

http://plnkr.co/edit/UzvucP5T9ijpIP4iDLrt?p=preview

这是html结构，我不知道在哪里放置复选框。

<div ng-app="MyApp" ng-controller="displayController">
      <table style="width:100%" >
        <tr ng-repeat="data in datas">
          <td>
            <input type="checkbox" ng-model="data.clicked">
          </td>
          <td>{{ data.venture }}</td>
          <td>{{ data.message }}</td>
        </tr>
      </table>
    </div>
    <button ng-click="delete()">DELETE</button>

Answer 1

<button ng-click="delete()">DELETE</button>超出了控制器的范围考虑将button移到div内，因为它将属于controller

您的代码看起来应该是这样的

<div ng-app="MyApp" ng-controller="displayController">

  <table style="width:100%" >
    <tr ng-repeat="data in datas">
      <td>
        <input type="checkbox" ng-model="data.clicked">
      </td>
      <td>{{ data.venture }}</td>
      <td>{{ data.message }}</td>
    </tr>
  </table>
  <button ng-click="delete()">DELETE</button>
</div>

Answer 2

要只有一个复选框，您可以按照以下步骤进行操作

将您的HTML更改为

<tr ng-repeat="(key, data) in datas">

      <td>
        <input type="checkbox" ng-model="data.clicked" ng-change="changed(key)">
      </td>
      <td>{{ data.venture }}</td>
      <td>{{ data.message }}</td>
    </tr>

并将更改的功能添加为

$scope.changed = function (changedKey) {

    angular.forEach($scope.datas, function(val, key){
          if(changedKey !== key){
            $scope.datas[key].clicked =false;
          }
        })
  };

使用AngularJS从表中删除一行

2 个答案: