使用AngularJS從表中刪除一行

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