Próbuję zrobić pole edycyjne w kanciasty JS, ale nie wiem, jak to zrobić, pomóż mi

Poniżej znajduje się mój kod operacji 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>

Robię operacje Crud w kątowym JS. Zrobiłem usunięcie i dodałem, ale nie wiem, jak zrobić edycję operacji w kątowym JS

1
Babu 28 czerwiec 2017, 10:44

5 odpowiedzi

Najlepsza odpowiedź
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>

Spróbuj tego.

1
Atul Sharma 28 czerwiec 2017, 07:54

Do edycji tego, co możesz zrobić:

0. Wprowadź identyfikator na Edycja Kliknij i uzyskaj dane tego identyfikatora i przypisać do tej samej zmiennej używanej do dodawania i ukrywania przycisku Dodaj i pokaż przycisk aktualizacji.

1. Użyj tego samego pola tekstowego, którego używasz do dodawania i wyświetlania / Ukryj przycisku Dodaj / aktualizuj odpowiednio.

2. Możesz użyć oddzielnie div, który zawiera jedno pole tekstowe i przycisk, aby zaktualizować.show/hide zgodnie z działaniem.

0
UniCoder 28 czerwiec 2017, 08:12

Jeśli chcesz go wziąć na "następny poziom", sprawdź XeDitable. :)

https://vitalets.github.io/angular-xeDitable/#text-Simple.

Powodzenia!

0
Marius 28 czerwiec 2017, 08:04

Początkowo musisz dodać opcję edycji na <li> powiedz,

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

      </li>
</ul>

Następnie dodaj funkcję sterownika do edycji {x0}} jak

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

Następnie możesz ponownie użyć funkcji 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.";
        }
     }
  }
0
Ankit Agarwal 28 czerwiec 2017, 07:56

Rozwiązanie jest tutaj:

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 = '';
}

Spójrz na moje rozwiązanie w Filddeds: https://jsfiddle.net/tfx8NJW6/

1
nevradub 28 czerwiec 2017, 08:01