在 AngularJS 中的 select 选项之后编辑并删除 div

Question

这是我的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>

编辑

如果有selectEdit选项，我要改

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

到输入框

删除

如果 select Delete 选项，我想删除整个 div (<div class="row">...</div>)

我试过了，但是我的功能是错误的。

请帮忙。

谢谢。

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

Answer 2

可以通过在 'Edit' 和 'Delete' element.And 上编写 ng-click 侦听器来完成，每个数据记录都有一个隐藏的输入字段，当用户按下 'Edit' & span 元素将在那时隐藏。

在下面的示例中，如果将 makeItEditable 写为编辑监听器，将 deleteIt 写为删除监听器。

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>

在 AngularJS 中的 select 选项之后编辑并删除 div

edit & delete div after select option in AngularJS

html

edit

angularjs

drop-down-menu