Question

我正在编写一个应用程序，我想在另一个集合中编辑集合。因此，我对集合的每个元素都有一个重复的表单。

以下http://plnkr.co/edit/SP5IRaZZJfTaE9DISrXs?p=preview的完整示例是关键部分：

<div ng-repeat="u in users" class="user">
  <div>{{u.name}} <button ng-click="delete(users, $index)">X</button></div>

  <div class="contacts">Contacts:
    <ul><li ng-repeat="c in u.contacts">{{c.name}}
          <button ng-click="delete(u.pseudos, $index)">X</button></li>

        <!-- This will be users[index].newContactName - ugly... -->
        <li><input type="text" ng-model="u.newContactName" />
          <button ng-click="addContact($index)">add contact</button></li></ul>
  </div>
</div>
<!-- This will be $scope.newUser - no problem -->
<input type="text" ng-model="newUser" /><button ng-click="addUser()">add user</button>

这种方式有效，直到我需要观看收藏 - 现在正在编辑newContactName触发我的“深度”观看：

$scope.$watch('users', function(newUsers, oldUsers) {
  // $scope.log = $scope.log + "users updated\n";
}, true);

在Angular中执行此类操作的“规范”方式是什么？我是否应该为每个用户提供并行的“新联系人”集合，因此观看users将不会受到影响？（保持同步会很奇怪）

Answer 1

我会这样看：

  $scope.$watch('users', function(newUsers, oldUsers) {
    //detect changes in user list
    if (newUsers.length > oldUsers.length) {
      alert("user added\n")
      //do something 
      return;
    }
    if (newUsers.length < oldUsers.length) {
      alert("user deleted\n")
      //do something 
      return;
    }
    //nothing has changed in users. Examine contacts (This is the part I am not proud of, since it may take bloody ages with thousands of users and contacts)
    angular.forEach(newUsers, function(user, index) {
      if (user.contacts.length > oldUsers[index].contacts.length) {
        alert('Contact added to: ' + user.name);
        //do something 
        return;
      }
      if (user.contacts.length < oldUsers[index].contacts.length) {
        alert('Contact deleted from: ' + user.name);
        //do something 
        return;
      }
    })
    //nothing has changed in contacts too? Must be some lousy edit!
  }, true);

不确定这是否是规范的角度zen或新的watchCollection是否更适合。但是，嘿，它有效：Forked Plunker with lots of Alerts

Answer 2

现在我最终得到了一个并行的表单数组，并且并行更新它，我在每个用户下面都有其他集合，这个“新表单”集合可以为所有表单保存字段：{{3} }（添加了监视更新的日志记录）

关键部分：

<div ng-repeat="u in users" class="user">
  <div>{{u.name}} <button ng-click="delete($index, [users, userNewForms])">X</button></div>
  <div class="contacts">Contacts:
    <ul><li ng-repeat="c in u.contacts">{{c.name}}
          <button ng-click="delete($index, u.contacts)">X</button></li>

        <li><input type="text" ng-model="userNewForms[$index].newContactName" />
          <button ng-click="addContact($index)">add contact</button></li></ul>
  </div>
</div>
<input type="text" ng-model="newUser" /><button ng-click="addUser()">add user</button>

使用Javascript：

  $scope.addContact = function(userIndex) {
    var user = $scope.userNewForms[ userIndex ];
    $scope.users[ userIndex ].contacts.push( {'name': user.newContactName } );
  }

  $scope.delete = function(index, arraysOrArray) {
    if(arraysOrArray[0] instanceof Array) {
       for( var i = 0; i < arraysOrArray.length; ++i ) {
          arraysOrArray[i].splice( index, 1 );
       }
    }
    else {
      arraysOrArray.splice( index, 1 );
    }
  }
...    
function computeNewContactForms(users) {
   var result = [];
   for( var u in users ) {
      result.push( makeNewContactForm() );
   }
   return result;
}

function makeNewContactForm() { return { 'newContactName': '' }; }

最有趣的事情是发现如果我使用（在arrayOrArrays中）而不是基于索引的迭代，那么我得到一个异常。它看起来像“in”形式触发绑定或其他东西的立即更新。

在AngularJS中编辑集合 - 在哪里保留“新项目”表单的模型？

2 个答案: