AngularJS - ngrepeat表单输入元素动态填充默认值以发布

时间:2014-03-12 15:26:25

标签: angularjs angularjs-scope angularjs-ng-repeat angular-ngmodel angularjs-ng-init

http://jsfiddle.net/9sCnC/12/#

我正在浏览一个json文件并通过ng-repeat解析它,每个项目上的一个按钮打开一个模态窗口。 在这个窗口中,生成一个表单,其中包含我想要放入另一个数据数组的数据,该数据将通过post发送到php文件......

  <div ng-repeat="value in model.values">
  <input type="text" ng-model="model.values[$index]" />
 </div>
        <hr>
        <!--Details content Begin-->
        <div class="circle-list">
                           <div class="circle-list-item" ng-repeat="course in courses | filter:query | orderBy:predicate:reverse | filter:Type" ng-mouseenter="hover(course)" ng-mouseleave="hover(course)">   

                               <span class="btn-xs pull-right">
                                    <span id="Time" class="glyphicon glyphicon-time"></span> {{course.duur}}u
                                </span>

                               <a id="course.Id" title="{{course.NoEDA}}" href="{{course.link}}">{{course.titel | lowercase}}</a>
                               <span id="Type" class="ng-class:course.type">{{course.type}}</span>

                               <span ng-show="course.showOverlay" class="btn-group btn-group-xs">
                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#ModalSubscribe{{$index}}"><span class="glyphicon glyphicon-pencil"></span></button>
                                    <!-- <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span></button> -->
                                    <!-- Button trigger modal -->
                               </span>


                                    <div class="modal fade" id="ModalSubscribe{{$index}}" tabindex="-1" role="dialog" aria-labelledby="ModalSubscribe" aria-hidden="true">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="glyphicon glyphicon-pencil"> Inschrijven</h4>
                                            </div>
                                            <div class="modal-body">
                                  <!-- SHOW ERROR/SUCCESS MESSAGES -->
                                  <!--
                                  <div id="messages" ng-show="message" ng-class="{ 'has-error' : errormail }">{{ message }}</div>
                                  -->
                                    <div id="messages" class="alert alert-success" data-ng-show="message" >{{ message }}</div>
                                    <div id="messages" class="alert alert-danger" data-ng-show="errormessage" >{{ errormessage }}</div>

                                    <form id="register" name="register" class="form-horizontal" role="form" ng-submit="processForm()">
                                    <div id="name-group" class="form-group">
                                      <!-- EDA -->
                                      <label class="col-sm-2 control-label">Opleiding:</label>
                                      <div class="col-sm-10 controls"> 

                                          <input type="text" name="eda[]" class="form-control" value="{{course.NoEDA}}" ng-model="course.NoEDA"> 


                                      </div>
                                      <!-- Name -->
                                      <label class="col-sm-2 control-label">Naam:</label>
                                      <div class="col-sm-10 controls">
                                        <input type="text" name="name[]" class="form-control" placeholder="Naam" ng-model="formData.name">
                                      </div>
                                      <!-- Matricule -->
                                      <label class="col-sm-2 control-label">Stamnumer:</label>
                                      <div class="col-sm-10 controls">
                                        <input type="number" name="matricule[]" class="form-control" placeholder="Stamnummer" ng-model="formData.matricule">
                                      </div>

                                    </div>
                                    <!--<legend>Email</legend>-->
                                    <div class="form-group" ng-class="{'has-error': errormail}">
                                      <label class="col-sm-2 control-label">Email:</label>
                                      <div class="input-group">
                                        <span class="input-group-addon">@</span>
                                        <input type="email" name="[]mail" class="form-control" data-ng-model="formData.mail" placeholder="mail"/>
                                      </div>
                                      <!--<span class="help-block" ng-show="errormail">{{ errormail }}</span>-->
                                    </div>
                                    <input type="checkbox" ng-model="formData.agree1" name="Agreement1[]" required />
                                    Ik ben akkoord
                                    <input type="checkbox" ng-model="formData.agree2" name="Agreement2[]" required />
                                    Ik ga akkoord
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
                                  <button type="submit" class="btn btn-primary" ng-enabled="{{register.mail}}"><i class="glyphicon glyphicon-ok"></i>&nbsp;Inschrijven</button>
                                </div>
                                  </form> 
                                {{ formData }}
                                </div>
                                        </div>
                                    </div> 





                                <!-- temp, later wel plaatsen
                                <span class="label label-default">{{course.Departement}}</span>
                                -->
                                <small>
                                    <br/><i id="placelabel" class="text-muted"><span class="glyphicon glyphicon-map-marker"></span> {{course.plaats || "-"}}</i>
                                    <i id="placename" class="text-primary"><span class="glyphicon glyphicon-calendar"></span> {{course.organisatie || "-"}}</i>
                                    <small id="public" class="pull-right"><br /><i class="doelgroep">{{course.doelgroep}}</i></small>
                                </small>
                           </div>
       </div>
       <!--Details content End-->
</div>
<!--container content End-->

我不明白的是:

ng-init="formData.eda=course.NoEDA"    is putting the last item in the array I guess

value="{{course.NoEDA}}"  this is showing the good item array

如何将正确的项目从course.NoEDA转移到另一个ng-model formData.eda?

我刚开始这样做,如果我这样做的方式不对,请帮帮我... 我的小提琴根本不工作,但在我的本地服务器上一切正常,除了传递值以发布它们...

提前感谢...

0 个答案:

没有答案