Angularjs Inline Edit row not working

Question

When i click edit button all input field is enabled

also this not disabled

<span ng-show="edit != true">{{data.question}}</span>

<tr ng-repeat="data in Value ">
    <td>
        <span ng-show="edit != true">{{data.question}}</span>
        <input ng-show="edit" type="text" ng-model="data.question" class="form-control" placeholder="Name">
    </td>
    <td>{{dataId.name}}</td>
    <td><span id="{{data.id}}" ng-click="editUtterance(data.id)" class="glyphicon glyphicon-pencil edit"></span></td>
</tr>


$scope.edit = 'false';
console.log($scope.edit);
$scope.editUtterance = function(id){
    alert(id);
    $scope.edit = 'true';
    console.log($scope.edit);
}

Hi, your question seems to be not clear. you can use ng-disabled for disabling the DOM element. Suppose if you don't want the space occupied for input can be removed by ng-show/ng-hide or ng-if. In your ng-show change to ng-show ="edit !='true'". Hope your are finding this — Vignesh
– Vignesh, Commented Mar 23, 2018 at 8:38
I want like this plnkr.co/edit/vAACyxv2bE0li5muefsQ?p=preview — My Test
– My Test, Commented Mar 23, 2018 at 9:23

arbghl · Accepted Answer · 2018-03-23 14:09:12Z

1

From what limited data and code you have provided in your question, I have put together a basic PLUNKER which gives you the edit and save functionality in line in a table cell.

The idea is to attach the edit flag (it's better if it's a boolean rather than a string) to each element in the array so we can track which row should be editable. If you set it to scope and use it like you have shown in the code, it will be applied to all rows and all of them will be editable even if your intent was for a single row.

#script.js
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.Value = [{
   id: 1,
   question: 'question 1',
   name: 'name 1'
}, {
   id: 2,
   question: 'question 2',
   name: 'name 2'
  }, {
   id: 3,
   question: 'question 3',
   name: 'name 3'
  }]
$scope.editUtterance = function(data) {
  alert(data.id);
  data.edit = true;
  console.log(data.edit);
}
$scope.save = function(data) {
   data.edit = false;
}
});

answered Mar 23, 2018 at 14:09

arbghl

3682 silver badges17 bronze badges

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

1 Comment

arbghl Over a year ago

Try the plunker now. I have fixed the problem

Vignesh · Accepted Answer · 2018-03-24 03:52:09Z

Try this

angular.module('demo', ['ui.bootstrap']);

angular.module('demo').controller('DemoCtrl', DemoCtrl);

DemoCtrl.$inject = ['$scope', '$timeout'];

function DemoCtrl($scope, $timeout) {

$scope.Value = [{
      id: 1,
      question: "Ben"
    }, {
      id: 2,
      question: "Sally"
    }, {
      id: 3,
      question: "John"
    }];
    $scope.selected = {};

  $scope.editContact = function(data) {
    $scope.editing = true;
    $scope.selected = angular.copy(data);
  };

  $scope.saveContact = function(id) {
    $scope.editing = false;
    $scope.Value[id] = angular.copy($scope.selected);
  };
  }

body {
    margin: 20px;
  }
  
  #th-name,
  #th-age {
    width: 40%;
  }
  
  #th-actions {
    width: 20%;
  }

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.min.js"></script>
  <script type="text/javascript" src="app.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="DemoCtrl">
  <h3>ng-show/hide</h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th id="th-name">Question</th>
        <th id="th-age">ID</th>
      </tr>
    </thead>
    <tr ng-repeat="data in Value">
      <td>
        <span ng-show="edit != true">{{data.question}}</span>
        <input ng-show="edit" type="text" ng-model="selected.question" class="form-control" placeholder="question">
      </td>
      <td>
        <span ng-show="edit != true">{{data.id}}</span>
        <input ng-show="edit" type="text" ng-model="selected.id" class="form-control" placeholder="ID">
      </td>
      <td>
        <button ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; editContact(data)"><i class="fa fa-fw fa-pencil"></i></button>
        <button ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index)"><i class="fa fa-fw fa-floppy-o"></i></button>
      </td>
    </tr>
  </table>
</body>

</html>

Mohamed Saad · Accepted Answer · 2020-01-08 12:06:45Z

  $scope.editContact = function (data) {
                debugger;
                $scope.editing = true;
                $scope.universityModel = angular.copy(data);
            };
            $scope.CancelEdit = function (event) {
                $scope.editing = false;
                event.preventDefault();
            }

`

   <tbody>
                            <tr ng-repeat="item in UniversityList  track by $index">

                                <td>

                                <span ng-show="edit != true">{{item.ValueAr}}</span>

                                <input ng-show="edit" type="text" ng-model="universityModel.ValueAr" class="form-control" placeholder="ValueAr">
                                    </td>
                                <td>
                                    <span ng-show="edit != true">{{item.ValueEn}}</span>
                                    <input ng-show="edit" type="text" ng-model="universityModel.ValueEn" class="form-control" placeholder="ValueEn">

                                </td>
                                <td class="text-center">
                                    <button class="btn green" ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; editContact(item)"><i class="fa  fa-edit"></i></button>
                                    <button class="btn red" ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; DeleteUniversity(item.Id,$index )"><i class="fa  fa-trash-o"></i></button>

                                    <button class="btn blue" ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index,$event,universityModel)"><i class="fa fa-fw fa-floppy-o"></i></button>
                                    <button class="btn red" ng-show="edit" id="table-cancel" ng-click="edit = false; CancelEdit($event)"><i class="fa fa-close"></i></button>

                                    <!--<a class="btn green" ng-click="toggleUniversityModal(item,true)"><i class="fa fa-edit"></i></a>
    <a class="btn red" ng-click="DeleteUniversity(item.Id,$index )"><i class="fa fa-trash-o"></i></a>-->
                               
                                </td>
                            </tr>
                        </tbody>

Collectives™ on Stack Overflow

Angularjs Inline Edit row not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related