如何仅启用父 table 原始项目作为 editable？

Question

单击编辑按钮 (ng-click="editmode = !editmode") 时，整个 table input 显示。是否有任何解决方案表明仅将其 <input type="text"> 显示为 editable ?

var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
  $scope.userdetails = {
    "id": "1",
    "user_id": "2",
    "name": "Alycia",
    "address": "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
    "post": "Howellmouth",
    "district": "Schaeferside",
    "state": "New Mexico",
    "pin": "61354-9529",
    "phone": "(239)009-2861x858",
    "mobile1": "+70(1)8058651903",
    "mobile2": "+69(3)0049980344",
    "file_id": "1",
    "email1": "Diana11@Sipes.info",
    "email2": "Dietrich.Georgianna@hotmail.com",
    "created_at": "2015-08-04 11:41:56",
    "updated_at": "2015-08-04 11:41:56"
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="testController" class="container">
  <table class="table table-hover table-responsive">
    <tbody>
      <tr>
        <th>Name</th>
        <td ng-if="!editmode">{{userdetails.name}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.name">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Address</th>
        <td ng-if="!editmode">{{userdetails.address}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.address">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Post</th>
        <td ng-if="!editmode">{{userdetails.post}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.post">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>District</th>
        <td ng-if="!editmode">{{userdetails.district}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.district">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>State</th>
        <td ng-if="!editmode">{{userdetails.state}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.state">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Pin</th>
        <td ng-if="!editmode">{{userdetails.pin}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.pin">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Phone</th>
        <td ng-if="!editmode">{{userdetails.phone}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.phone">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Mobile 1</th>
        <td ng-if="!editmode">{{userdetails.mobile1}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.mobile1">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
      <tr>
        <th>Mobile 2</th>
        <td ng-if="!editmode">{{userdetails.mobile2}}</td>
        <td ng-if="editmode">
          <input type="text" ng-model="userdetails.mobile2">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你应该给每个部分一个不同的名字，而不是每个输入的 "editmode" :

<tr>
    <th>Name</th>
    <td ng-if="!editName">{{userdetails.name}}</td>
    <td ng-if="editName">
      <input type="text" ng-model="userdetails.name">
    </td>
    <td>
      <button class="btn btn-default btn-xs" ng-click="editName = !editName"><span class="glyphicon glyphicon-pencil"></span>
      </button>
    </td>
  </tr>
  <tr>
    <th>Address</th>
    <td ng-if="!editAdress">{{userdetails.address}}</td>
    <td ng-if="editAdress">
      <input type="text" ng-model="userdetails.address">
    </td>
    <td>
      <button class="btn btn-default btn-xs" ng-click="editAdress = !editAdress"><span class="glyphicon glyphicon-pencil"></span>
      </button>
    </td>
  </tr>

希望对您有所帮助。

编辑：

这是另一个在这个 plunker

中起作用的命题

如果您稍微管理一下您的 $scope 数据，您可以生产更少的 HTML

数据将如下所示：

$scope.userdetails = {
    "id": { 
      value : "1",
      label: "ID"
    },
    "user_id": { 
      value : "2",
      label: "User Id"
    },
    "name": { 
      value : "Alycia",
      label: "Name",
      display: true
    },
    "address": { 
      value : "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
      label: "Address",
      display: true
    },
    "post": { 
      value : "Howellmouth",
      label: "Post",
      display: true
    }
  };

而 HTML 像这样：

<table class="table table-hover table-responsive">
    <tbody>
      <tr ng-if="property.display" ng-repeat="property in userdetails">
        <th>{{property.label}}</th>
        <td ng-if="!property.editmode">{{property.value}}</td>
        <td ng-if="property.editmode">
          <input type="text" ng-model="property.value">
        </td>
        <td>
          <button class="btn btn-default btn-xs" ng-click="property.editmode = !property.editmode"><span class="glyphicon glyphicon-pencil"></span>
          </button>
        </td>
      </tr>
  </table>

如何仅启用父 table 原始项目作为 editable？

How to enable only parent table raw items as editable?

angularjs

angularjs-ng-click

ng-show

angularjs-ng-form

ng-hide