Codelife Codelife - 5 months ago 27
JSON Question

Delete a row from a table using ANgularJS

I want to delete a row from a table in AngularJS. Data in the table coming from api.JSON file. If I click on checkbox and then Delete button, it should be deleted. Also, I want to restrict the selection. Suppose, if I click on checkbox of first row, then it will be unchecked if I click any other row. So, one time, only one row should be selected. This is the plnkr link :-

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

This is the html structure, I am not sure where to place the checkbox.

<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

<button ng-click="delete()">DELETE</button> is out of scope of controller Consider moving button inside div as it will fall under controller

Your code should look something like this

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