CODEWITHSUNDEEP
javascriptformsangularjs
user2695680
user2695680

Reputation:

Editing and Saving Data in ng-repeat mode - AngularJS

I am working on Edit/Save data using AngularJS. Below is the very basic code sample of what I am trying to achieve.

JS BIN URL

Editing and saving the data functionality is working fine before i use the below code to "repeater" selector. 

 ng-repeat="var in [1,2,3]"

If you see it doesn't behave the same for all textarea elements in "ng-repeat" case. How can I target the selected textarea at the time of Edit/Save button click.

ANGULARJS CODE

var app = angular.module('myapp', []);

app.controller('myctrl', ['$scope', function ($scope) {

  $scope.editEnabled= false;
  $scope.dummydata= "This is dummy data";

  $scope.editData=function(){
    $scope.editEnabled = true;
    $scope.inputText = $scope.dummydata;
  };

  $scope.saveData=function(){
    $scope.editEnabled = false;
    $scope.dummydata = $scope.inputText;
  };

  $scope.disableEdit= function(){
    $scope.editEnabled = false;
  };

}]);

Thanks in advance for any help.

Upvotes: 0

Views: 2878

Answers (1)

mpm
mpm

Reputation: 20155

Something along these lines should work. The data in your controller should reflect what you want to display in your view.

http://jsbin.com/beyunuze/7/edit

<body ng-controller="myctrl">
  <div class="repeater" ng-repeat="item in items ">
    <div class="btnCont">
       <span ng-hide="item.editEnabled">
           <button ng-click="editData(item)">Edit</button>
       </span>
       <span ng-show="item.editEnabled">
           <button ng-click="saveData(item)">Save</button>
      </span>
    </div>

    <div class="textArea">
      <div ng-hide="item.editEnabled" class="content">
        {{item.dummyData}}
      </div>
      <div ng-show="item.editEnabled">
        <textarea ng-model="item.dummyData" class="content contentInput" /></textarea>
      </div>
    </div>
  </div>
</body>

the js :

var app = angular.module('myapp', []);

    app.controller('myctrl', ['$scope', function ($scope) {
      $scope.items=[{dummyData:"foo"},{dummyData:"bar"},{dummyData:"baz"}];
      $scope.editEnabled= false;
      $scope.dummydata= "This is dummy data";

      $scope.editData=function(item){
        item.editEnabled = true;
      };

      $scope.saveData=function(item){
        item.editEnabled = false;
      };

      $scope.disableEdit= function(){
        $scope.editEnabled = false;
      };

    }]);

Upvotes: 1

Related Questions