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

试试这个。