0

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.

Improve this question

1 Answer 1

Reset to default
1

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

    }]);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.