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>

修改

如果选择Edit选项，我想要更改

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

到输入框

删除

如果选择Delete选项，我想删除整个div（<div class="row">...</div>）

我试图这样做，但我的功能是错误的。

请帮助。

谢谢。

Answer 1

您可以在输入字段旁边放置输入字段，您可以根据单击编辑和输入字段的模糊来显示/隐藏这些输入字段。

＆＃13;

angular.module('app', [])
  .controller("test", function($scope) {
    $scope.text1 = "Ventes fleurs à 12%";
    $scope.text2 = "25";
    $scope.edit = function() {
      $scope.editText1 = true;
      $scope.editText2 = true;
    }
  })

＆＃13;

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

＆＃13;

Answer 2

可以通过编写ng-click听众来编辑＆＃39;并且＆＃39;删除＆＃39;每个数据记录都有一个隐藏的输入字段，当用户按下＆＃39;编辑＆＃39; ＆安培;那时span元素将被隐藏。

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

＆＃13;

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;
    }
});

＆＃13;

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

＆＃13;

编辑＆amp;在AngularJS中选择选项后删除div

2 个答案: