Array of elements is not working correctly

I have the following mongoose schema

var MySchema = new Schema({
    field1: [{
        format: {
            type: String,
            required: true
        },
        value: {
            type: String,
            required: true
        }
    }],
    field2: [{
        format: {
            type: String,
            required: true
        },
        value: {
            type: String,
            required: true
        }
    }]
});

To get the input for this model I am creating a form which has the array of controls and the code is below

Even If if try to use the $scope.field1[<index>] it give the error that

TypeError: Cannot read property 'field1' of undefined

<div class="form-group">
  <div class="col-md-12 padding-left-0">
    <label for="question">Field1 Values</label>
  </div>
  <div class="col-md-12" ng-repeat="(optionKey, optionValue) in [0,1]">
    <ng-form name="field1Form{{optionKey}}">
      <div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_format.$invalid }">
        <label for="field1_format">Type</label>
        <select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[$index].format" required>
          <option value="text" selected="selected">Text</option>
          <option value="image">Image</option>
        </select>
        <div ng-show="submitted && field1Form{{optionKey}}.field1_format.$invalid" class="help-block">
          <p ng-show="field1Form{{optionKey}}.field1_format.$error.required">Field1 type is required</p>
        </div>
      </div>

      <div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_value.$invalid }">
        <div class="col-md-12">
          <label for="field1_value">Value</label>
        </div>
        <div class="col-md-12">
          <input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[$index].value" placeholder="Enter field1 value" required/>
          <div ng-show="submitted && field1Form{{optionKey}}.field1_value.$invalid" class="help-block">
            <p ng-show="field1Form{{optionKey}}.field1_value.$error.required">Field1 value is required</p>
          </div>
        </div>
      </div>
    </ng-form>
  </div>
</div>

<div class="form-group col-md-12 padding-left-0" data-ng-show="true">
  <div class="col-md-12 padding-left-0"><label>Field2 Values</label></div>
  <div class="col-md-6" data-ng-repeat="i in [0,1]">
    <ng-form name="field2Form{{i}}">
      <label>Value-{{i+1}}</label>
      <div class="col-md-12">
        <div class="col-md-4" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_format.$invalid }">
          <label for="field2_format">Type</label>
          <select class="form-control" name="field2_format" id="field2_format" data-ng-model="form.field2[$index].format" required>
            <option value="text">Text</option>
            <option value="image">Image</option>
          </select>
          <div ng-show="submitted && field2Form{{i}}.field2_format.$invalid" class="help-block">
            <p ng-show="field2Form{{i}}.field2_format.$error.required">Field2 type is required</p>
          </div>
        </div>

        <div class="col-md-7" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_value.$invalid }">
          <label for="field2_value">Value</label>
          <input type="text" class="form-control" name="field2_value" id="field2_value" data-ng-model="form.field2[$index].value" placeholder="Enter Value {{i+1}}" required/>
          <div ng-show="submitted && field2Form{{i}}.field2_value.$invalid" class="help-block">
            <p ng-show="field2Form{{i}}.field2_value.$error.required">Field2 value is required</p>
          </div>
        </div>
      </div>
    </ng-form>
  </div>
</div>

But in the angular controller I am getting the array of object values for field2 but field1 is not coming (missing) from the form data.

But when I hard code the question array like below for field1 then field1 also work fine

<div class="form-group">
  <div class="col-md-12">
    <ng-form name="field1Form0">
      <div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form0.field1_format.$invalid }">
        <label for="field1_format">Type</label>
        <select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[0].format" required>
          <option value="text">Text</option>
          <option value="image">Image</option>
        </select>
        <div ng-show="submitted && field1Form0.field1_format.$invalid" class="help-block">
          <p ng-show="field1Form0.field1_format.$error.required">Field1 type is required</p>
        </div>
      </div>

      <div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form0.field1_value.$invalid }">
        <div class="col-md-12">
          <label for="field1_value">Value</label>
        </div>
        <div class="col-md-12">
          <input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[0].value" placeholder="Enter field1" required/>
          <div ng-show="submitted && field1Form0.field1_value.$invalid" class="help-block">
            <p ng-show="field1Form0.field1_value.$error.required">Question value is required</p>
          </div>
        </div>

      </div>
    </ng-form>
  </div>
</div>

Can anyone help me in this?

Answers


It seems like some angular issue.

It has been fixed by declaring the variable in angular Controller like below

$scope.form = {};
$scope.form.field1 = {};

Now its working fine. May be the issue in auto declaring the nested objects or array in angular.


Need Your Help

How to Insert a row and return autoincrement value in sqlite in wp?

windows-phone-7 windows-phone-8

I have an app using sqlite client. In the app i insert the data in a table and i need the Id which is autoincreament. Is there anyway to get the id in executenonquery? s.th like sqlparameter or ......

Move topSearch to nav container using local.xml

xml magento layout

How can I move the topSearch block to inside "nav-container" div, using local.xml?