javascript - Angularjs 仅在所选行上显示输入

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>

bool 值

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>