значения Копирование из объектов массива полей ввода в AngularJS

Question

У меня есть массив как это:

[ 
{ 
    name: "simon", 
    surname: "Bi" 
}, 
{ 
    name: "Frank", 
    surname: "Bour" 
} 
] 

Я печатать все данные в таблице, и я хочу, чтобы изменить эти значения:

name1 - surname1 - edit1 - remove1 
name2 - surname2 - edit2 - remove2 

Когда Я нажимаю «edit», я хочу скопировать данные пользователя в поля ввода (так что всего 2 поля, имя и фамилия), поэтому я могу изменить данные и обновить массив, но я не знаю, как это сделать в AngularJS.

JS:

angular. 
    module('peopleList'). 
    component('peopleList', { 
     templateUrl: "list.template.html", 
     controller: 
      function peopleListController(){ 
       var self = this; 

       self.people = [ 
        { 
         name: "Simon", 
         surname: "Bo", 
        } 
       ]; 

       //add 
       self.addPerson = function(itemToAdd) { 
        this.people.push(angular.copy(itemToAdd)) 
       } 

       //remove 
       self.delete = function(item) { 
        var index = this.people.indexOf(item); 
        this.people.splice(index, 1); 
       } 

       //edit 
       self.edit = function(item){ 
       code 
       } 
      } 
    }); 

HTML:

<form name="myForm" ng-submit="$ctrl.addText(form)"> 
      <div class="form-group"> 
       <label for="name">Name: </label> 
       <input id="name" type="text" class="form-control" ng-model="itemToAdd.name" placeholder="name" required> 
      </div> 
      <div class="form-group"> 
       <label for="surname">Surname:</label> 
       <input id="surname" type="text" class="form-control" ng-model="itemToAdd.surname" placeholder="surname" required> 
       <button ng-click="$ctrl.addPerson(itemToAdd)" class="btn btn-primary" id="add">Add</button> 
      </div> 
</form> 


<table> 
      <thead> 
       <tr> 
        <td>Name</td> 
        <td>Surname</td> 
        <td colspan="2">Actions</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="person in $ctrl.people | filter:$ctrl.query | orderBy: $ctrl.orderProp"> 
        <td>{{person.name}}</td> 
        <td>{{person.surname}}</td> 
        <td class="edit" ng-click="$ctrl.edit(person)" style="cursor: pointer; text-decoration: underline;">Edit</td> 
        <td class="remove" ng-click="$ctrl.delete(person)" style="cursor: pointer; font-weight: bold; color: red;">X</td> 
       </tr> 
      </tbody> 
     </table> 

Answer 1

Попробуйте ниже код это почти само за себя, просто использовали ng-model and ng-hide/ng-show для достижения этой цели.

var app = angular.module('app',[]); 
 
app.controller('Ctrl',function($scope,$filter){ 
 

 

 
$scope.editField={}; 
 
    
 
    $scope.edit = function(index){ 
 
    $scope.editField[index] = !$scope.editField[index] ; 
 
    }; 
 

 
$scope.data = [{name: "simon", 
 
surname: "Bi" 
 
}, 
 
{name: "Frank", 
 
surname: "Bour" 
 
}]; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="app" class="widget-content" ng-controller="Ctrl"> 
 

 
       <table> 
 
      <tr ng-repeat="emp in data"> 
 
         <td>{{$index+1}} </td> 
 
         <td ng-hide="editField[$index]"> {{emp.surname}}</td> 
 
         <td ng-hide="editField[$index]">{{emp.name}} </td> 
 
      <td ng-show="editField[$index]"><input type="text" ng-model="emp.surname"/></td> 
 
      <td ng-show="editField[$index]"><input type="text" ng-model="emp.name"/></td> 
 
      <td ng-click="edit($index)"><button>{{editField[$index]? 'Save': 'Edit'}}</button></td> 
 
    </tr> 
 
       </table> 
 

 
      </div>