元素数组无法正常工作

时间:2015-08-14 09:31:41

标签: angularjs node.js mean-stack mean.io

我有以下mongoose架构

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
        }
    }]
});

要获取此模型的输入,我创建的表单包含控件数组,代码位于

下面

即使如果尝试使用$scope.field1[<index>],也会出现错误

  

TypeError:无法读取属性&#39; field1&#39;未定义的

<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>

但是在角度控制器中,我得到了field2的对象值数组,但是field1没有从表单数据中出现(缺失)。

但是当我为field1硬编码下面的问题数组时,field1也可以正常工作

<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>

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:4)

这似乎是一些角色问题。

通过在angular Controller中声明变量来解决此问题

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

现在它的工作正常。 可能是自动声明角度为nested objects or array的问题。