18
Sto imparando di j angolare e ho trovato il problema.Come modificare e aggiornare la riga della tabella dati in js angolari?
Sto creando un nuovo progetto.
ho qualche pulsante di modifica, aggiungere, rimuovere,
Se scatto al mio pulsante di modifica di mostrare tutti i campi, ma voglio mostrare solo campo corrente di quanto mi clicca per aggiornare aggiornamento questo archiviato.
mio codice è qui
Anguar
var app = angular.module('addApp', []);
app.controller('modifyCtrl', ['$scope', function($scope){
$scope.tabelsData= [
{'name':'rohit', 'dob':'15-august-1985', 'emailId':'[email protected]', 'phone':'9999999999', 'address':'Delhi Rohini', 'id':'0' },
{'name':'aman', 'dob':'26-july-1975', 'emailId':'[email protected]', 'phone':'', 'address':'Haryana Sonepat', 'id':'1' },
{'name':'devraj', 'dob':'27-march-1980', 'emailId':'[email protected]', 'phone':'7410258963', 'address':'Punjab AmritSar', 'id':'2' }
];
$scope.modify = function(tableData){
$scope.modifyField = true;
$scope.viewField = true;
};
$scope.update = function(tableData){
$scope.modifyField = false;
$scope.viewField = false;
};
}]);
codice HTML è
<div ng-app="addApp">
<div class="wraper" ng-controller="modifyCtrl">
<table>
<thead>
<tr>
<th>Name:</th>
<th>Date Of Birth</th>
<th>Email Id</th>
<th>Phone No.</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tableData in tabelsData"><form>
<td>
<div ng-hide="viewField">{{tableData.name | uppercase}}</div>
<div ng-show="modifyField"><input type="text" ng-model="tableData.name" /></div>
</td>
<td>
<div ng-hide="viewField">{{tableData.dob}}</div>
<div ng-show="modifyField"><input type="text" ng-model="tableData.dob" /></div>
</td>
<td>
<div ng-hide="viewField">{{tableData.emailId}}</div>
<div ng-show="modifyField"><input type="text" ng-model="tableData.emailId" /></div>
</td>
<td>
<div ng-hide="viewField">{{tableData.phone}}</div>
<div ng-show="modifyField"><input type="text" ng-model="tableData.phone" /></div>
</td>
<td>
<div ng-hide="viewField">{{tableData.address}}</div>
<div ng-show="modifyField">
<textarea ng-model="tableData.address"></textarea>
</div>
</td>
<td>
<button ng-hide="viewField" ng-click="modify(tableData)">Modify</button>
<button ng-show="modifyField" ng-click="update(tableData)">Update</button>
<button ng-hide="viewField">Add</button>
<button ng-hide="viewField">Remove</button>
</td></form>
</tr>
</tbody>
</table>
</div>
</div>
\t \t var app = angular.module('addApp', []);
\t \t app.controller('modifyCtrl', ['$scope', function($scope){
\t \t \t $scope.tabelsData= [
\t \t \t \t {'name':'rohit', 'dob':'15-august-1985', 'emailId':'[email protected]', 'phone':'9999999999', 'address':'Delhi Rohini', 'id':'0' },
\t \t \t \t {'name':'aman', 'dob':'26-july-1975', 'emailId':'[email protected]', 'phone':'', 'address':'Haryana Sonepat', 'id':'1' },
\t \t \t \t {'name':'devraj', 'dob':'27-march-1980', 'emailId':'[email protected]', 'phone':'7410258963', 'address':'Punjab AmritSar', 'id':'2' }
\t \t \t ];
\t \t \t $scope.modify = function(tableData){
\t \t \t \t $scope.modifyField = true;
\t \t \t \t $scope.viewField = true;
\t \t \t };
\t \t \t $scope.update = function(tableData){
\t \t \t \t $scope.modifyField = false;
\t \t \t \t $scope.viewField = false;
\t \t \t };
\t \t }]);
\t \ttable td, table th{
border:solid 1px red;
padding:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="addApp">
<div class="wraper" ng-controller="modifyCtrl">
\t \t \t <table>
\t \t \t \t <thead>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th>Name:</th>
\t \t \t \t \t \t <th>Date Of Birth</th>
\t \t \t \t \t \t <th>Email Id</th>
\t \t \t \t \t \t <th>Phone No.</th>
\t \t \t \t \t \t <th>Address</th>
\t \t \t \t \t \t <th>Action</th>
\t \t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t <tbody>
\t \t \t \t \t <tr ng-repeat="tableData in tabelsData"><form>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <div ng-hide="viewField">{{tableData.name | uppercase}}</div>
\t \t \t \t \t \t \t <div ng-show="modifyField"><input type="text" ng-model="tableData.name" /></div>
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <div ng-hide="viewField">{{tableData.dob}}</div>
\t \t \t \t \t \t \t <div ng-show="modifyField"><input type="text" ng-model="tableData.dob" /></div>
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <div ng-hide="viewField">{{tableData.emailId}}</div>
\t \t \t \t \t \t \t <div ng-show="modifyField"><input type="text" ng-model="tableData.emailId" /></div>
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <div ng-hide="viewField">{{tableData.phone}}</div>
\t \t \t \t \t \t \t <div ng-show="modifyField"><input type="text" ng-model="tableData.phone" /></div>
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <div ng-hide="viewField">{{tableData.address}}</div>
\t \t \t \t \t \t \t <div ng-show="modifyField">
\t \t \t \t \t \t \t \t <textarea ng-model="tableData.address"></textarea>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </td>
\t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <button ng-hide="viewField" ng-click="modify(tableData)">Modify</button>
\t \t \t \t \t \t \t <button ng-show="modifyField" ng-click="update(tableData)">Update</button>
\t \t \t \t \t \t \t <button ng-hide="viewField">Add</button>
\t \t \t \t \t \t \t <button ng-hide="viewField">Remove</button>
\t \t \t \t \t \t </td></form>
\t \t \t \t \t </tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t </div>
</div>