Question

我正在使用以下信息构建客户端集合：

"name" : "Test client",
"email" : "test@test.com",
"position" : "Project Manger",
"contacts" : [
    {
        "name" : "asdf",
        "email" : "asdf@adf",
        "tel" : "7877877878",
        "title" : "asdf"
    },
    {
        "name" : "fdas",
        "email" : "fdas@fdas",
        "tel" : "7877877878",
        "title" : "fdsa"
    }
],

我希望能够编辑/更新客户端的联系人，但我不确定如何使用角度，因为我在ng-repeat中重复了客户端的联系人。

<div ng-repeat="contact in contacts track by $index">
  <label>Name</label>
  <input type="tel" ng-model="contact.name">
  <label>Telephone</label>
  <input type="tel" ng-model="contact.tel">
  <label>Email</label>
  <input type="email" ng-model="contact.email">
  <label>Title</label>
  <input type="text" ng-model="contact.title">
  <md-button ng-click="save(contact)">Save</md-button>
</div>

和我的控制员：

'use strict'

angular.module('myApp')
.controller('ContactsCtrl', function($scope, $mdDialog, $mdMedia, client) {

  $scope.client = client;

  $scope.contacts = client.contacts;


  $scope.save = (contact) => {
    Clients.update({_id: client._id},{
      $set: {
        contacts : contact
      }
    },function(err, data){
      if(err) return console.log(err);
      console.log(data + " " );
      $mdDialog.hide(data);
    });
  }

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.hide = function() {
    $mdDialog.hide();
  };
});

但是当我按下save时，它会用一个对象替换数组。

问题

如何使用ng-repeat中的表单更新文档内部数组中的现有对象？

Answer 1

将html更改为：

<div ng-repeat="contact in contacts track by $index">
  <label>Name</label>
  <input type="tel" ng-model="contact.name">
  <label>Telephone</label>
  <input type="tel" ng-model="contact.tel">
  <label>Email</label>
  <input type="email" ng-model="contact.email">
  <label>Title</label>
  <input type="text" ng-model="contact.title">
  <md-button ng-click="save($index,contact)">Save</md-button>
</div>

并将（）函数保存到

$scope.save = (index,contact) => {
    Clients.update({_id: client._id},{
      $set: {
        contacts[index] : contact
      }
    },function(err, data){
      if(err) return console.log(err);
      console.log(data + " " );
      $mdDialog.hide(data);
    });
  }

希望它成功。

Answer 2

能够做一些工作，但我不确定这是否是最好的选择。

执行$index功能时只需添加save：

<md-button ng-click="save($index, contact)">Save</md-button>

并在控制器中保存功能：

$scope.save = (index, contact) => {
  $scope.client.contacts[index] = contact;
  Clients.update({_id: client._id},{
    $set: {
      contacts : $scope.client.contacts
    }
  },function(err, data){
    if(err) return console.log(err);
    console.log(data + " " );
    $mdDialog.hide(data);
  });
}

更新AngularJS中对象内的数组内的对象

2 个答案: