时间戳

首页 > 解决方案 > AngularJS嵌套的ng-repeat不修改模型

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

问题描述

我正在尝试遍历嵌套对象并使用复选框来切换属性。我正在使用嵌套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
    }
  }

标签： angularjs

解决方案

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>

推荐阅读