1

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.

2
  • Your tried code please Commented Feb 6, 2017 at 11:14
  • its not useful and I removed it now I can't undo it.sorry Commented Feb 6, 2017 at 11:20

2 Answers 2

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><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>

Sign up to request clarification or add additional context in comments.

Comments

1

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.