AngularJS嵌套的ng-repeat不会修改模型

时间:2019-06-24 14:17:14

标签: angularjs

我正在尝试遍历嵌套对象,并使用复选框来切换属性。我正在使用嵌套的ng-repeat语句。数据显示正常,但是当我去保存数据时,事实证明它实际上并没有像通常那样修改ng-model。这里有我想念的东西吗?

这是HTML:

<div class="settings-container">
  <div ng-repeat="(key, category) in vm.graphSettings">
    <div class="row">
      <div class="col-xs-12">
        <h3>{{ key | titleCase }}</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-md-10 col-xs-12">
        <div class="row select-row">
          <div class="col-xs-3" ng-repeat="(id, value) in category">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="value">
                <div class="pseudo-checkbox"></div>
                <span class="input-name">{{ id | titleCase }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是上面vm.graphSettings所反映的对象。

  graph: {
    general: {
      showLegend: false,
      showNullValues: false,
      showTitle: false,
    },
    xAxis: {
      showLabel: false,
      showXAxis: true,
      dynamicLines: true
    },
    yAxis: {
      showLabel: false,
      showYAxis: false
    }
  }

1 个答案:

答案 0 :(得分:0)

ng-model应该是模型属性的名称,而不是值本身:

<div class="settings-container">
  <div ng-repeat="(key, category) in vm.graphSettings">
    <div class="row">
      <div class="col-xs-12">
        <h3>{{ key | titleCase }}</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-md-10 col-xs-12">
        <div class="row select-row">
          <div class="col-xs-3" ng-repeat="(id, value) in category">
            <div class="checkbox">
              <label>
                ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶a̶l̶u̶e̶"̶>̶
                <input type="checkbox" ng-model="category[id]">
                <div class="pseudo-checkbox"></div>
                <span class="input-name">{{ id | titleCase }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>