Question

我有一个包含编辑和删除的表格。

在我的编辑中，当用户点击/选择铅笔图标时，我希望输入仅显示在我使用ng-show的所选行上。

问题是它显示了表中的所有输入。

HTML

<table class="table table-sm">
<thead>
    <tr>
        <th>Room type name</th>
        <th class="text-center">Actions</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="roomtype in vm.roomTypes1">
        <td ng-show="!vm.toogleBool" class="text-capitalize">{{ roomtype.type }}</td>
        <td ng-show="vm.toogleBool">
            <input type="text" class="form-control form-control-sm text-capitalize" aria-describedby="emailHelp" ng-model="roomtype.type">
        </td>
        <td class="text-center actionIcons" ng-show="!vm.toogleBool">
            <span>
                <i class="fa fa-pencil" aria-hidden="true" ng-click="vm.toogleBool = !vm.toogleBool"></i>
            </span>
            <span ng-click="vm.deleteItem(roomtype._id)">
                <i class="fa fa-trash-o" aria-hidden="true"></i>
            </span>
        </td>
        <td ng-show="vm.toogleBool">
            <button ng-click="vm.toogleBool = !vm.toogleBool">save</button>
        </td>
    </tr>
</tbody></table>

布尔

vm.toogleBool = false;

vm.roomTypes1数据

[
{
    "_id": "5a694b2b5f3dfe31b045724e",
    "type": "deluxe",
    "__v": 0,
    "dateCreated": "2018-01-25T03:12:43.418Z"
},
{
    "_id": "5a694b3f5f3dfe31b045724f",
    "type": "superior",
    "__v": 0,
    "dateCreated": "2018-01-25T03:13:03.132Z"
},
{
    "_id": "5a694b435f3dfe31b0457250",
    "type": "executive",
    "__v": 0,
    "dateCreated": "2018-01-25T03:13:07.644Z"
},
{
    "_id": "5a694b4b5f3dfe31b0457251",
    "type": "deluxe suite",
    "__v": 0,
    "dateCreated": "2018-01-25T03:13:15.820Z"
}]

Answer 1

我认为在桌面上完成内联编辑的最简单方法是通过向阵列上的每个对象添加编辑标记来污染数据。

下面你可以找到它的例子：

angular.module('app', [])
      .controller('AppController', appController);
    
    function  appController ($scope) {
      
      $scope.roomTypes = [{
        name : 'Test'
      }, {
        name : 'Test2'
      }, {
        name : 'Test3'
      }]
      
      $scope.toggleMode = function (type) {
        type.editing = !type.editing;
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="type in roomTypes">
              <td>
                <span ng-if="!type.editing">
                  {{type.name}}
                </span>
                <span ng-if="type.editing">
                  <input 
                       type="text" 
                       ng-model="type.name" >
                </span>
                
              </td>
              <td>
                <button ng-click="toggleMode(type)">
                   {{type.editing ? 'Save' : 'Edit'}}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Answer 2

vm.toggleBool绑定到每个编辑/保存按钮。如果您能够为vm.roomTypes1数据对象添加和绑定布尔属性，它应该可以工作。

更新数据

[
{
    "_id": "5a694b2b5f3dfe31b045724e",
    "type": "deluxe",
    "__v": 0,
    "dateCreated": "2018-01-25T03:12:43.418Z",
    isEdit: false
},
{
    "_id": "5a694b3f5f3dfe31b045724f",
    "type": "superior",
    "__v": 0,
    "dateCreated": "2018-01-25T03:13:03.132Z",
    isEdit: false
},
...

房型代码

<tr ng-repeat="roomtype in vm.roomTypes1">
    <td ng-show="!roomtype.isEdit" class="text-capitalize">{{ roomtype.type }}</td>
    <td ng-show="roomtype.isEdit">
        <input type="text" class="form-control form-control-sm text-capitalize" aria-describedby="emailHelp" ng-model="roomtype.type">
    </td>
    <td class="text-center actionIcons" ng-show="!roomtype.isEdit">
        <span>
            <i class="fa fa-pencil" aria-hidden="true" ng-click="roomtype.isEdit = !roomtype.isEdit"></i>
        </span>
        <span ng-click="vm.deleteItem(roomtype._id)">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
        </span>
    </td>
    <td ng-show="roomtype.isEdit">
        <button ng-click="roomtype.isEdit = !roomtype.isEdit">save</button>
    </td>
</tr>

Angularjs仅在所选行上显示输入

2 个答案: