Question

Angularjs内联编辑行无法正常工作

当我点击编辑按钮时，所有输入字段都已启用

这也没有禁用

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

Answer 1

根据您在问题中提供的有限数据和代码，我已经整理了一个基本的PLUNKER，它可以在表格单元格中为您提供编辑和保存功能。

我们的想法是将编辑标志（如果它是布尔值而不是字符串更好）附加到数组中的每个元素，这样我们就可以跟踪哪一行应该是可编辑的。如果您将其设置为范围并按照您在代码中显示的方式使用它，它将应用于所有行，即使您的意图是针对单行，所有行也都可以编辑。

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

Answer 2

试试这个

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>

Answer 3

  $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>

Angularjs内联编辑行无效

3 个答案: