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