0

单击编辑按钮 ( ng-click="editmode = !editmode") 时，显示整个表格input。是否有任何解决方案可以显示仅显示<input type="text">为可编辑？

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>

4

1 回答 1

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>
于 2015-08-05T09:35:32.177 回答