在AngularJS中将值从对象数组复制到输入字段

Copy values from object array to input fields in AngularJS

本文关键字：复制数组输入字段对象 AngularJS 更新时间：2023-09-26

我有一个这样的数组:

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

我打印表中的所有数据，我想编辑这个值:

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

当我按下"编辑"，我想复制用户的数据输入字段(所以只有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>

试试下面的代码，它几乎是不言自明的，只是使用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>