18
Ich lerne angular js und ich habe festgestellt, dass ich Problem.Wie ändert und aktualisiert Datentabellenzeile in eckigen js?
Ich erstelle ein neues Projekt.
Ich habe einige Schaltfläche bearbeiten, hinzufügen, entfernen
, wenn ich auf meine bearbeiten klicken als alle Felder anzeigen, aber ich mag nur aktuelles Feld zeigen, als i-Update dieses eingereicht aktualisieren klicken auf.
Mein Code ist hier
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;
};
}]);
HTML-Code ist
<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>