Question

我有以下html模板：

<div ng-repeat="member in memberList">
    <ng-switch on="editMode">                           

         <span ng-switch-when="false"> 
             some html
         </span>

        <span ng-switch-when="true">
          <form role="form" ng-init="setFormModel($parent.$index)">
          <form-element ng-model="formModel.name"></form-element>
          <form-element ng-model="formModel.address"></form-element>                   
          <form-element ng-model="formModel.id"></form-element>
        </span>

</ng-switch>
</div>

Inside Controller我将setFormModel方法设为

$scope.setFormModel=function(index){
    $scope.formModel={
        name        :$scope.memberList[index].name,
        address     :$scope.memberList[index].address,
        id          :$scope.memberList[index].id,
    };
};

现在，要求每个成员表单都有自己的formModel副本，以便各个成员表单彼此独立。使用当前方法setFormModel()，一个成员表单中的更改将反映出来在所有其他形式中，好像它们共享相同的模型，并且$ scope.formModel的相同副本可用于所有表单。如何为每个表单创建单独的模型？或者实现这一目标的最佳方法是什么？

Answer 1

ng-repeat为每个member创建子范围。你可以<form-element ng-model="member.name"></form-element>

<div ng-repeat="member in memberList">
  <form role="form">
     <form-element ng-model="member.name"></form-element>
     <form-element ng-model="member.address"></form-element>                   
     <form-element ng-model="member.id"></form-element>
  </form>
</div>

编辑：

修改示例以获得主/克隆副本：

<div ng-repeat="member in memberList" ng-init="cloned = copy(member)>
  <form role="form">
     <form-element ng-model="cloned.name"></form-element>
     <form-element ng-model="cloned.address"></form-element>                   
     <form-element ng-model="cloned.id"></form-element>
     <button type="submit" ng-click="member = copy(cloned)">save</button>
  </form>
</div>

这需要在范围上成为函数copy。您可以在控制器上定义它：

function copy(item){
   return angular.copy(item);
}

这是plunker

如何在嵌套范围内创建私有非原始$ scope变量，如ng-switch？

1 个答案: