編集ボタン ( 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>