Angular.js, repeat in form and submit POST values

Question

Angular.js, repeat in form and submit POST values

I'm pretty new to Angular.js and am trying to figure out how to get the data from a form on submit. But the fields are part of an ng-repeat. At the moment when I submit using ajaxSubmitButton, to a php server side script which only displays the post values, it only shows the last of the input fields...if that makes any sense. Here is the form code:

<form class="form">
<div id="client-form" ng:controller="ClientForm">
  <div class="client" ng:repeat="client in form.clients">
    <div class="row">
      <input type="text" name="client.name" size="80" />
    </div>
  </div>

<div>
    <?php echo  CHtml::ajaxSubmitButton(
                    'Submit',
                    CHtml::normalizeUrl(array('client/create.php')),
                    array(
                        'success'=>'function(data){
                            alert("success:"+data);
                        }',
                    )
                ); ?>
</div>

The JavaScript is as follows:

<script src="'/js/angular.min.js'; ?>" ng:autobind></script>
<script>
function ClientForm(){
  this.form = {
    clients : [
      { name: 'test1', },
      { name: 'test2', },
      { name: 'test3', },
    ]
  };

}
</script>

And the PHP script is very simple:

<?php
    print_r($_POST);
?>

The alert in the ajaxSubmitButton call returns the following:

success:Array
(
  [client]=>test3
)

As you can see it is only returning the value of the last input text field.

I am sure there must be something I am doing wrong here, but can't seem to see it. Any guidance would be great.

Thanks.

php
angularjs

Answer 1

I managed to find the answer to this thanks to someone on IRC for Yii - can't remember your name but thanks! Basically I had to change the name attribute of the fields to be an array.

<input name="client[name][]" value="{{client.name}}" />

This now works perfectly for text fields. But for a select dropdown it no longer selects the predefined value.

<form class="form">
<div id="client-form" ng:controller="ClientForm">
  <div class="client" ng:repeat="client in form.clients">
    <div class="row">
      <input name="client[name][]" value="{{client.name}}" /><input name="client[id][]" value="{{client.id}}" />
      <?php
        echo CHtml::dropDownList('client[select][]', '{{client.select}}', CHtml::listData(Region::model()->findAll(array('order' => 'name')), 'id', 'name'), array('empty' => 'Select a Region'));
      ?>{{client.id}}
    </div>
  </div>

<div>

Javascript:

<script src="<?php echo Yii::app()->baseUrl . '/js/angular.min.js'; ?>" ng:autobind></script>
<script>
function ClientForm(){
  this.form = {
    clients : [
      { name: 'test1', id:'1', select:'1'},
      { name: 'test2', id:'2', select:'2'},
      { name: 'test3', id:'3', select:'3'},
    ]
  };

}
</script>

Any idea how to ensure my select list is now prepopulated?

Thanks.

Answer 2

Any idea how to ensure my select list is now prepopulated?

See How to make a preselection for a select list generated by AngularJS?