元素数组无法正常工作

Question

我有以下猫鼬模式

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：无法读取未定义的属性“field1”

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

谁能帮我解决这个问题？

Answer 1

这似乎是一些角度问题。

已通过在angular Controller 中声明变量来修复，如下所示

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

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

Answer 2

很可能你把很多事情搞混了。

• 其中一个您已经识别 - 范围没有 form 属性。

• 表达式field1Form{{optionKey}}.field1_format.$invalid 无效，因为字符串插值不能在找到它的上下文中使用。据我所知，ng-class 和 ng-show 指令需要 JavaScript 表达式，而不是模板.我的意思很清楚，插值表达式{{optionKey}}，不应该用在ng-class和ng-show 指令。