Question

我正在尝试在角度js中进行编辑，但我不知道如何帮助我

下面是我的Crud操作代码

＆＃13;

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

＆＃13;

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

＆＃13;

我正在角js做crud操作。我已经完成了删除和添加，但我不知道如何在角度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

如果您想将其带到“下一级”，请查看xeditable。：）

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

祝你好运！

Answer 5

编辑您可以做的事情：

0.在编辑点击时获取id并获取该id的数据并分配给您用于添加和隐藏添加按钮和显示更新按钮的相同变量。

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

2.您可以单独使用包含一个文本框和按钮的div来更新。按照您的操作显示/隐藏。

在角度js如何做一个编辑选项？

5 个答案: