edit & delete div after select option in AngularJS - html

Question

This is my HTML
<div class="row">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<span class="dark_gray_font pull-right">Ventes fleurs à 12%</span>
</div>
<div class="col-md-5">
<span class="dark_gray_font pull-right">25 <i class="fa fa-eur"></i></span>
<hr>
</div>
Edit
If select Edit option, I want to change
<span class="dark_gray_font pull-right">Ventes fleurs à 12%</span>
&
<span class="dark_gray_font pull-right">25 <i class="fa fa-eur"></i></span>
to input box
Delete
If select Delete option, I want to remove whole div (<div class="row">...</div>)
I tried to do it but my functions are wrong.
any help please.
Thank you.

Answer 1

Can be done by writing ng-click listeners on 'Edit' and 'Delete' element.And having a hidden input field each data record which will be shown when user press 'Edit' & the span element will be made hidden at that time.
In the below example if written makeItEditable as an edit listener & deleteIt as a delete listener.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.makeItEditable=function(index){
if($scope.currentEditableIndex!=null)
$scope.names[$scope.currentEditableIndex].editable=false;
$scope.names[index].editable=true;
$scope.currentEditableIndex=index;
}
$scope.deleteIt=function(index){
if($scope.currentEditableIndex!=null)
$scope.names[$scope.currentEditableIndex].editable=false;
$scope.names.splice(index,1);
$scope.currentEditableIndex=null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div class="row" ng-repeat="x in names">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<span ng-hide="x.editable" class="dark_gray_font pull-right">{{x.Name}}</span>
<input ng-show="x.editable" type='text' ng-model="x.Name"/>
</div>
<div class="col-md-5">
<span ng-hide="x.editable" class="dark_gray_font pull-right">{{x.Country}}<i class="fa fa-eur"></i></span>
<input ng-show="x.editable" type='text' ng-model="x.Country"/>
<hr>
</div>
</div>

Answer 2

You can have input fields adjacent to you span tags, which you can show/hide based on click of Edit and blur of the input field respectively.
angular.module('app', [])
.controller("test", function($scope) {
$scope.text1 = "Ventes fleurs à 12%";
$scope.text2 = "25";
$scope.edit = function() {
$scope.editText1 = true;
$scope.editText2 = true;
}
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<div class="row">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit
</li>
<li>Delete
</li>
</ul>
</div>
<span class="dark_gray_font pull-right" ng-show="!editText1">{{text1}}</span>
<input type="text" class="dark_gray_font pull-right" ng-model="text1" ng-show="editText1" ng-blur="editText1=false" />
</div>
<div class="col-md-5">
<span class="dark_gray_font pull-right" ng-show="!editText2">{{text2}} <i class="fa fa-eur"></i>
</span>
<input type="text" class="dark_gray_font pull-right" ng-model="text2" ng-show="editText2" ng-blur="editText2=false" />
</div>
</div>