0

Hello all I am new in angularJs. I want to update single row in table instead of whole table after editing it in a form.

Here I am trying to create a table without ng-repeat.

plnkr

Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40
R.Raj
  • 39
  • 2
  • 8

2 Answers2

0

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">

<head>
  <title>My ParseApp site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>

<body>

  <table>
    <tr ng-repeat="info in infos">
      <td ng-hide="info.update" ng-bind="info.name"></td>
      <td ng-show="info.update">
        <input type="text" ng-model="info.name" />
      </td>
      <td>
        <button ng-click="updateMe(info)">click to edit</button>
      </td>
    </tr>
  </table>

  <script>
    var app = angular.module('app', []);

    app.controller("ctrl", function($scope) {
      $scope.infos = [{
        name: "user1"
      }, {
        name: "user2"
      }, {
        name: "user3"
      }, {
        name: "user4"
      }];

      $scope.updateMe = function(object) {
        object.update ? object.update = false : object.update = true;
      }
    })
  </script>
</body>

</html>
Maher
  • 2,517
  • 1
  • 19
  • 32
  • But i need a different form to update data and there will be additional fields to update that will be dynamic.. – R.Raj Dec 14 '15 at 09:15
  • @R.Raj with this sample you can create the form you want, for example open form in modal or something like that ... – Maher Dec 14 '15 at 09:25
  • even if it is out of table?? – R.Raj Dec 14 '15 at 09:36
  • @R.Raj yes .. i create a solution in this article [popup](http://stackoverflow.com/questions/34262461/add-item-json-in-angular-with-pop-up/34262614#34262614) – Maher Dec 14 '15 at 09:39
  • ok data is going to form but after saving the changes it should reflect to table without refreshing all the data in table – R.Raj Dec 14 '15 at 10:37
0

Final solution..

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">

<head>
  <title>My ParseApp site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>

<body>
  <form ng-show="update">
       user <input type="text" ng-model="upname.name" /> <button ng-click="updateTable(upname)">save</button>
  </form>

  <table>
    <tr ng-repeat="info in infos">
      <td ng-bind="info.name"></td>
      <td ng-bind="info.lastname" ></td>
      <td>
        <button ng-click="updateMe(info)">click to edit</button>
      </td>
    </tr>
  </table>

  <script>
    var app = angular.module('app', []);

    app.controller("ctrl", function($scope) {
      $scope.infos = [{
        name: "user1",id:0,lastname:"abc"
      }, {
        name: "user2",lastname:"abc",id:1
      }, {
        name: "user3",lastname:"abc",id:2
      }, {
        name: "user4",lastname:"abc",id:3
      }];

      $scope.updateMe = function(object) {
       $scope.upname = object;
        $scope.update=true;
      }
      
      $scope.updateTable = function(object){
       
      }
    })
  </script>
</body>

</html>
R.Raj
  • 39
  • 2
  • 8