編集＆AngularJS

Question

で選択したオプションの後にdiv要素を削除するには、これは私の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

が「編集」にng-clickリスナーを書き込むことによって行われ、「削除」することができます隠し入力フィールドにするとき、ユーザーを押して「編集表示されます各データレコードを持つelement.And '& 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>

Answer 2

スパンタグに隣接する入力フィールドを持つことができます。これは、入力フィールドの編集とぼかしをそれぞれクリックすることで表示/非表示できます。

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>