edit & delete div after select option in AngularJS

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><a href="">Edit</a></li>
      <li><a href="">Delete</a></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.

Your tried code please

Ankit Chaudhary
– Ankit Chaudhary

2017-02-06 11:14:47 +00:00
Commented Feb 6, 2017 at 11:14 — Ankit Chaudhary
– Ankit Chaudhary, Commented Feb 6, 2017 at 11:14
its not useful and I removed it now I can't undo it.sorry

Menaka Kariyawasam
– Menaka Kariyawasam

2017-02-06 11:20:51 +00:00
Commented Feb 6, 2017 at 11:20 — Menaka Kariyawasam
– Menaka Kariyawasam, Commented Feb 6, 2017 at 11:20

Ankit Chaudhary · Accepted Answer · 2017-02-06 11:53:07Z

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><a href="" ng-click="makeItEditable($index)">Edit</a></li>
      <li><a href="" ng-click="deleteIt($index)">Delete</a></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>

Dev · Accepted Answer · 2017-02-06 12:07:49Z

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/[email protected]/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><a href="" ng-click="edit()">Edit</a>
          </li>
          <li><a href="">Delete</a>
          </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>

Collectives™ on Stack Overflow

edit & delete div after select option in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related