元素数组无法正常工作

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

但是在 angular 控制器中，我得到了 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 问题。

已通过在 angular Controller 中声明变量来解决此问题，如下所示

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

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

Answer 2

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

其中一个你已经认出来了 - 示波器没有 form 属性.
表达式 field1Form{{optionKey}}.field1_format.$invalid 无效，因为不能在找到它的上下文中使用字符串插值。据我所知，ng-class 和 ng-show 指令需要一个 JavaScript 表达式，而不是模板。我的观点很明确，插值表达式{{optionKey}}不应该用在ng-class和ng-show 指令。

元素数组无法正常工作

Array of elements is not working correctly

angularjs

node.js

mean-stack

mean.io