Hello there! I'm fairly new to Angularjs and recently I've been working on implementing an edit feature for a field and attempting to save the data. Below is the HTML code snippet where the magic happens:
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
Here's the corresponding JavaScript code:
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
angular.copy($scope.address[$index], $scope.address);
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save = function() {
$scope.istrue=false;
angular.copy($scope.addresses, $scope.addresses[0])
Address.save($scope.addresses)
};
I am currently focused on fetching and saving the data within the Address service, which retrieves information from the database.