javascript - Bulk Edit on Angular Grid - Stack Overflow

admin管理员组

文章数量:1026212

The way which I have handled the row level edition for payment received property as shown below:

   <tr ng-repeat="item in Event.ParticipantPledges">
    <div>
        <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
        <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-model="Event.ParticipantPledge.PaymentReceived" required />
    </div>
   </tr>

I have a grid as shown above.I know how to edit row level as shown above.But my question is how can I do it for all rows at once.In other words bulk edit.I can give a button as Edit All and then user can edit any row and after that he can update the records.But when I give a such feature where if user changes one item's value then it apply to all the rows of that item.I know this is happening due to 2 way data binding nature.But could you tell me how to avoid this ? Thanks in advance.

Note : Simple example is more than enough.

The way which I have handled the row level edition for payment received property as shown below:

   <tr ng-repeat="item in Event.ParticipantPledges">
    <div>
        <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
        <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-model="Event.ParticipantPledge.PaymentReceived" required />
    </div>
   </tr>

I have a grid as shown above.I know how to edit row level as shown above.But my question is how can I do it for all rows at once.In other words bulk edit.I can give a button as Edit All and then user can edit any row and after that he can update the records.But when I give a such feature where if user changes one item's value then it apply to all the rows of that item.I know this is happening due to 2 way data binding nature.But could you tell me how to avoid this ? Thanks in advance.

Note : Simple example is more than enough.

• javascript
• angularjs

Share Improve this question Follow edited Jul 3, 2015 at 7:07 Sampath asked Jul 3, 2015 at 5:23 SampathSampath 66k7070 gold badges325325 silver badges459459 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I have used awesome Angular-xeditable directive for that.

Play with it : JSFiddle

HTML :

<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
      <tr style="font-weight: bold">
        <td style="width:40%">Name</td>
        <td style="width:30%">Status</td>
        <td style="width:30%">Group</td>
        <td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
      </tr>
      <tr ng-repeat="user in users | filter:filterUser">
        <td>
          <!-- editable username (text with validation) -->
          <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
            {{ user.name || 'empty' }}
          </span>
        </td>
        <td>
          <!-- editable status (select-local) -->
          <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
            {{ showStatus(user) }}
          </span>
        </td>
        <td>
          <!-- editable group (select-remote) -->
          <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
            {{ showGroup(user) }}
          </span>
        </td>
        <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
      </tr>
    </table>

    <!-- buttons -->
    <div class="btn-edit">
      <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
        edit
      </button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
      <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div> 

  </form>
</div>

JS :

app.controller('EditableTableCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  // filter users to show
  $scope.filterUser = function(user) {
    return user.isDeleted !== true;
  };

  // mark user as deleted
  $scope.deleteUser = function(id) {
    var filtered = $filter('filter')($scope.users, {id: id});
    if (filtered.length) {
      filtered[0].isDeleted = true;
    }
  };

  // add user
  $scope.addUser = function() {
    $scope.users.push({
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null,
      isNew: true
    });
  };

  // cancel all changes
  $scope.cancel = function() {
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];    
      // undelete
      if (user.isDeleted) {
        delete user.isDeleted;
      }
      // remove new 
      if (user.isNew) {
        $scope.users.splice(i, 1);
      }      
    };
  };

  // save edits
  $scope.saveTable = function() {
    var results = [];
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];
      // actually delete user
      if (user.isDeleted) {
        $scope.users.splice(i, 1);
      }
      // mark as not new 
      if (user.isNew) {
        user.isNew = false;
      }

      // send on server
      results.push($http.post('/saveUser', user));      
    }

    return $q.all(results);
  };
});

As understood by me i think you want to give value first time to all and then give individual values to each row if you want.

For this take Edit all Button and open a popup onclick event on that button. in popup accept the input and update the angular object by using foreach method. so it will apply to all objects.

I think this will help you...

Upadated this may help you...

<div ng-repeat="Event.ParticipantPledge in Event.dataArray track by $index">
    <div>
    <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
    <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-bind="Event.ParticipantPledge.PaymentReceived" required />
    <button onclick="updateValue($index,updatedValue)">Update</button>
</div>
</div>



updateValue(id,value){
    $scope.Event.dataArray[id].ParticipantPledge.PaymentReceived = value;
}

The issue wrt all rows having same value on edit is you are bind input of all rows to the same model "ng-model="Event.ParticipantPledge.PaymentReceived". Instead you should bind to that rows model i.e bind the input to say, item.paymentReceived. Then when you have update all button outside you can loop through all the items and get the value and update db.

http://jsfiddle/twx2p7s9/1/

<div ng-repeat="line in lines">
  <input ng-model="line.text"/>
</div>

The way which I have handled the row level edition for payment received property as shown below:

   <tr ng-repeat="item in Event.ParticipantPledges">
    <div>
        <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
        <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-model="Event.ParticipantPledge.PaymentReceived" required />
    </div>
   </tr>

I have a grid as shown above.I know how to edit row level as shown above.But my question is how can I do it for all rows at once.In other words bulk edit.I can give a button as Edit All and then user can edit any row and after that he can update the records.But when I give a such feature where if user changes one item's value then it apply to all the rows of that item.I know this is happening due to 2 way data binding nature.But could you tell me how to avoid this ? Thanks in advance.

Note : Simple example is more than enough.

The way which I have handled the row level edition for payment received property as shown below:

   <tr ng-repeat="item in Event.ParticipantPledges">
    <div>
        <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
        <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-model="Event.ParticipantPledge.PaymentReceived" required />
    </div>
   </tr>

I have a grid as shown above.I know how to edit row level as shown above.But my question is how can I do it for all rows at once.In other words bulk edit.I can give a button as Edit All and then user can edit any row and after that he can update the records.But when I give a such feature where if user changes one item's value then it apply to all the rows of that item.I know this is happening due to 2 way data binding nature.But could you tell me how to avoid this ? Thanks in advance.

Note : Simple example is more than enough.

• javascript
• angularjs

Share Improve this question Follow edited Jul 3, 2015 at 7:07 Sampath asked Jul 3, 2015 at 5:23 SampathSampath 66k7070 gold badges325325 silver badges459459 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I have used awesome Angular-xeditable directive for that.

Play with it : JSFiddle

HTML :

<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
      <tr style="font-weight: bold">
        <td style="width:40%">Name</td>
        <td style="width:30%">Status</td>
        <td style="width:30%">Group</td>
        <td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
      </tr>
      <tr ng-repeat="user in users | filter:filterUser">
        <td>
          <!-- editable username (text with validation) -->
          <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
            {{ user.name || 'empty' }}
          </span>
        </td>
        <td>
          <!-- editable status (select-local) -->
          <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
            {{ showStatus(user) }}
          </span>
        </td>
        <td>
          <!-- editable group (select-remote) -->
          <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
            {{ showGroup(user) }}
          </span>
        </td>
        <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
      </tr>
    </table>

    <!-- buttons -->
    <div class="btn-edit">
      <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
        edit
      </button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
      <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div> 

  </form>
</div>

JS :

app.controller('EditableTableCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  // filter users to show
  $scope.filterUser = function(user) {
    return user.isDeleted !== true;
  };

  // mark user as deleted
  $scope.deleteUser = function(id) {
    var filtered = $filter('filter')($scope.users, {id: id});
    if (filtered.length) {
      filtered[0].isDeleted = true;
    }
  };

  // add user
  $scope.addUser = function() {
    $scope.users.push({
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null,
      isNew: true
    });
  };

  // cancel all changes
  $scope.cancel = function() {
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];    
      // undelete
      if (user.isDeleted) {
        delete user.isDeleted;
      }
      // remove new 
      if (user.isNew) {
        $scope.users.splice(i, 1);
      }      
    };
  };

  // save edits
  $scope.saveTable = function() {
    var results = [];
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];
      // actually delete user
      if (user.isDeleted) {
        $scope.users.splice(i, 1);
      }
      // mark as not new 
      if (user.isNew) {
        user.isNew = false;
      }

      // send on server
      results.push($http.post('/saveUser', user));      
    }

    return $q.all(results);
  };
});

As understood by me i think you want to give value first time to all and then give individual values to each row if you want.

For this take Edit all Button and open a popup onclick event on that button. in popup accept the input and update the angular object by using foreach method. so it will apply to all objects.

I think this will help you...

Upadated this may help you...

<div ng-repeat="Event.ParticipantPledge in Event.dataArray track by $index">
    <div>
    <span ng-if="item.Id != Event.ParticipantPledge.Id">{{item.PaymentReceived | currency}}</span>
    <input type="number" ng-if="item.Id == Event.ParticipantPledge.Id" name="paymentReceived" ng-bind="Event.ParticipantPledge.PaymentReceived" required />
    <button onclick="updateValue($index,updatedValue)">Update</button>
</div>
</div>



updateValue(id,value){
    $scope.Event.dataArray[id].ParticipantPledge.PaymentReceived = value;
}

The issue wrt all rows having same value on edit is you are bind input of all rows to the same model "ng-model="Event.ParticipantPledge.PaymentReceived". Instead you should bind to that rows model i.e bind the input to say, item.paymentReceived. Then when you have update all button outside you can loop through all the items and get the value and update db.

http://jsfiddle/twx2p7s9/1/

<div ng-repeat="line in lines">
  <input ng-model="line.text"/>
</div>

本文标签： javascriptBulk Edit on Angular GridStack Overflow