在Angular JS中如何执行编辑选项

Question

我正在尝试在Angular JS中进行编辑字段，但我不知道该怎么做，一个人可以帮助我

下面是我的CRUD操作代码

var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {
  $scope.products = ["venu", "balaji", "suresh"];
  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe)
    } else {
      $scope.errortext = "The item is already in your names list.";
    }
  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <ul>
      <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span>
      </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">ADD</button>
    <p>{{errortext}}</p>
    <p>Try to add the same name twice, and you will get an error message.</p>
  </div>
</div>

我在Angular JS进行CRUD操作。我已经删除并添加了，但我不知道如何在Angular JS

Answer 1

var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {
  $scope.products = ["venu", "balaji", "suresh"];
  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe)
    } else {
      $scope.errortext = "The item is already in your names list.";
    }
    
    $scope.addMe = "";
  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
  
  $scope.edit = function(index){
     $scope.addMe = $scope.products[index];
     $scope.products.splice(index, 1);
  }
  
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <ul>
      <li ng-repeat="x in products">{{x}}
      <span ng-click="removeItem($index)">×</span>
      <span style="color:blue;cursor:pointer;" ng-click="edit($index)">Edit</span>
      </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">ADD</button>
    <p>{{errortext}}</p>
    <p>Try to add the same name twice, and you will get an error message.</p>
  </div>
</div>

尝试一下。

Answer 2

解决方案在这里：

html

<li ng-repeat="x in products" ng-click="preEdit(x, $index)">{{x}}<span ng-click="removeItem($index)">×</span></li>
<input ng-model="addMe">
<button ng-if="isAdd" ng-click="addItem()">ADD</button>
<button ng-if="!isAdd" ng-click="editItem()">EDIT</button>

JS

$scope.isAdd = true;
$scope.preEdit = preEdit;
var index = '';
function preEdit(x, i){
     $scope.addMe = x;
     index = i;
     $scope.isAdd = false;
}
$scope.editItem = editItem ;
function editItem (){
     $scope.products[index] = $scope.addMe;
     $scope.isAdd = true;
     $scope.addMe = '';
     index = '';
}

在filddle中查看我的解决方案：https：//jsfiddle.net/tfx8njw6/

Answer 3

首先，您需要在<li>上添加编辑选项，

<ul>
      <li ng-repeat="x in products">{{x}}
         <span ng-click="removeItem($index)">×</span> 
         <span ng-click="editItem($index)">Edit</span>
      </li>
</ul>

然后添加用于编辑editItem()的控制器函数，例如

  $scope.editItem= function(index) {
    $scope.addMe = $scope.products[index];
    //this variable will allow you to check whether the operation is an edit or add
    $scope.editIndex = index;
  }

您可以像这样重复使用addItem()功能

$scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if(angular.isDefined($scope.editIndex)){
      $scope.products[$scope.editIndex] = $scope.addMe;
      //reset the variable to undefined after using it
      $scope.editIndex = undefined;
    }else{
       if ($scope.products.indexOf($scope.addMe) == -1) {
         $scope.products.push($scope.addMe);
        } else {
          $scope.errortext = "The item is already in your names list.";
        }
     }
  }

Answer 4

如果要将其带到"下一个级别"，请查看Xededible。：(

https://vitalets.github.io/angular-xediable/#text-simple

祝你好运！

Answer 5

用于编辑可以做什么：

0。在编辑中单击并获取该ID的数据，然后分配给您已用于添加和隐藏添加按钮的相同变量并显示更新按钮。

1.使用您用于添加和显示/隐藏按钮添加/更新的相同文本字段。

2.您可以单独使用Div，其中包含一个文本框和按钮以更新。根据您的操作，请显示。