How edit functionality update its value in frontend in angularjs?

Question

I am trying to write edit functionality in angularjs. It almost has done. But the value is not updated in view part. Can anyone help? My code is given below Am using ng-repeat="book in books"

Html

 <li ng-click="delegate.editPost()">Edit</li>
 <div ng-show="showEditPost">
   <div ng-click="delegate.savePost()">Save</div>
   <p ng-if="showEditPost==false">{{book.text}}</p>
   <div ng-if="showEditPost == true">
      <textarea >{{edit.text}}</textarea>
   </div>
 </div>

controller

    editPost:function(){
            $scope.showEditPost=true;
            $scope.edit=angular.copy($scope.books);
        },
       save:function(){
            var Obj = {
                text: $scope.edit.text
            }
            editService.edit( Obj,this.onSuccess, this.onFailure);
        },

    onSuccess:function(){

            $scope.showEditPost=false;
            angular.copy($scope.edit,$scope.books);
        }

I cant see ng-repeat in your html

Sravan
– Sravan

2018-04-17 09:57:47 +00:00
Commented Apr 17, 2018 at 9:57 — Sravan
– Sravan, Commented Apr 17, 2018 at 9:57
put your proper code

Sangram Badi
– Sangram Badi

2018-04-17 10:05:26 +00:00
Commented Apr 17, 2018 at 10:05 — Sangram Badi
– Sangram Badi, Commented Apr 17, 2018 at 10:05
ng-repeat="book in books"

swetha
– swetha

2018-04-17 10:11:43 +00:00
Commented Apr 17, 2018 at 10:11 — swetha
– swetha, Commented Apr 17, 2018 at 10:11
please give me a solution

swetha
– swetha

2018-04-17 10:18:47 +00:00
Commented Apr 17, 2018 at 10:18 — swetha
– swetha, Commented Apr 17, 2018 at 10:18

Aleksey Solovey · Accepted Answer · 2018-04-17 10:20:23Z

1

I think you are making it too complicated. But instead of working with entire arrays, you should be passing the index and working with individual elements. Here is a simple demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.books = [{
    "text": "Book 1"
  }, {
    "text": "Book 2"
  }];
  $scope.showEditPost = $scope.books.map(function(_) {
    return false;
  }); // populating array with `false` values
  
  $scope.editPost = function(index) {
    $scope.showEditPost[index] = true;
    // edit is now an element and not an entire array 
    $scope.edit = angular.copy($scope.books[index]);
  }
  $scope.savePost = function(edit, index) {
    $scope.books[index] = edit;
    $scope.showEditPost[index] = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<!-- 
`track by $index` is added to allow repetition/duplicates
-->
  <div ng-repeat="book in books track by $index">
    <!-- passing index with `$index` -->
    <button ng-click="editPost($index)">Edit</button>
    <!-- editing only an individual box by using index -->
    <p ng-if="!showEditPost[$index]">{{book.text}}</p>
    <div ng-if="showEditPost[$index]">
      <button ng-click="savePost(edit,$index)">Save</button><br>
      <!-- `ng-model` is added to allow modification -->
      <textarea ng-model="edit.text">{{edit.text}}</textarea>
    </div>
  </div>

</div>

answered Apr 17, 2018 at 10:20

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

swetha Over a year ago

I have one doubt. What about the service call?

Aleksey Solovey Over a year ago

@yazhini I don't have your service, or logic for it, so you need to adapt this code for yourself. Just put it into savePost function call and modify everything as you need it. This was just an example/demo after all

swetha Over a year ago

How to use id instead of index?

Aleksey Solovey Over a year ago

@yazhini I don't see why you need to use an ID, you are modifying a row. But if each book has an id property, you can pass it as a parameter with your_function( book.id ).

swetha Over a year ago

You are correct. But now am struggling with that only. How To pass the book id as parameter with my function

|

Collectives™ on Stack Overflow

How edit functionality update its value in frontend in angularjs?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related