ng-model和ng-repeat的问题，inout值在页面上的每个表单域上都是重复的

Question

我有一个基于ng-repeat创建多个表单的页面。一切工作正常，直到写入输入的东西，所有其他重复的形式输入元素重复所有。我已经使用ng-model =“Notify.message”，它只是一个对象，它从输入中获取值并发送到按钮提交的控件，因此也是逻辑的其余部分。

我找的时候，如果一个表单被填满，其他形式应保持安静，不应该重复的写在表格1

这里输入文本的值是代码：

<div data-ng-show="alluserposts.length > 0"> 

     <div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" > 
       <div class="row" style="margin-left: -5px"> 
        <form class="text-center" role="form" id=f1{{userpost.id}} name="userForm" 
          ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate> 
         <div class="row"> 
          <div class="col-xs-8 col-md-4"> 
           <div class="form-group"> 
            <input data-container="body" data-toggle="popover" data-placement="top" 
              data-content="Any message which you would like to convey to post owner" 
              type="text" ng-model="Notify.message" data-ng-init="Notify.message=''" 
              id="u{{userpost.id}}" 
              placeholder="Enter a Message or Phone number" class="form-control" 
              required> 

            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is 
             required.</p> 
            <script>$(function() { 
             $("[data-toggle='popover']").popover(); 
            }); 
            </script> 

            <input type="hidden" ng-model="Notify.loggedInEmail" 
              ng-init="Notify.loggedInEmail = result.email"/> 
            <input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/> 
            <input type="hidden" ng-model="Notify.destEmail" 
              ng-init="Notify.destEmail = userpost.userEmail"/> 
           </div> 
          </div> 

          <div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2"> 
           <button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty" 
             type="submit"> 
            Notify Post Owner 
           </button> 
          </div> 
         </div> 
        </form> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

我会尝试下面的解决方案来实现它。

创建一个嵌套的json对象，其中包含要在angularjs控制器中显示的多个表单。

例如

$scope.FormsCollection = { 
     "Form1" : [ 
      {"title" : "Rockband", "details" : "1hr"}, 
     ], 
     "Form2" : [ 
      {"title" : "The Old You", "details" : "Dr. Smith"} 
     ] 

} 

很明显，你可以使用循环来构建它或任何方法，你最适合你的背景下打造angularjs控制器的形式收集。

然后在HTML页面中，您可以使用以下规则来正确填充每个表单数据

你需要两个NG重复，首先各形态指标，然后遍历嵌套表格对象。

<input type="text" ng-model="form[index].firstName"/> 

的结果，你将有$ scope.FormsCollection以正确的形式对象数据

请下面的jsfiddle

http://jsfiddle.net/CMnxW/4/

的jsfiddle应该包含下面的代码检查示例代码。

<div ng-app> 
    <div ng-controller="controller"> 
     <ul ng-repeat="post in posts"> 
      <li>{{$index}} 
       <input type="text" ng-model="post.userEmail" /> 
       <button class="btn btn-danger" ng-click="notify(post)" type="button">Notify</button> 
      </li> 
     </ul> 

     <table> 
      <tr> 
       <td>destEmail is: </td> 
       <td>{{Notify.destEmail}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS：

function controller($scope) { 
    $scope.Notify = { 
     destEmail: '' 
    }; 

    $scope.posts = [{userEmail: 'e@mail.com'}, {userEmail: 'f@mail.com'}]; 

    $scope.notify = function(post) { 
     $scope.Notify.destEmail = post.userEmail; 
     //set other $scope.Notify properties from post 
     //your other notify code... 
    } 
}