将 ng-repeat 与 ng-model 一起使用会修改错误的对象答案

【问题标题】：Using ng-repeat with ng-model modifies wrong object将 ng-repeat 与 ng-model 一起使用会修改错误的对象
【发布时间】：2016-08-09 05:40:57
【问题描述】：

TLDR：这是问题的 plnkr：https://plnkr.co/edit/HfRoCgPfdoZNxmTtDLf7?p=preview

我有一个带有复选框的表单：

<div class="form-group">
  <div class="input-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="rental.car2go.airport.berlin"> Berlin
      </label>
      <br/>
      <label>
        <input type="checkbox" ng-model="rental.car2go.airport.hamburg"> Hamburg
      </label>
      <br/>
    </div>
  </div>
</div>

即修改出租对象。这是控制器的样子：

angular.module('c2gyoApp', []).controller('c2gyoAppController', [
'$scope',
'state',
function($scope, state) {
  $scope.airports = [{
    "name": "Berlin",
    "model": "rental.car2go.airport.berlin"
  }, {
    "name": "Hamburg",
    "model": "rental.car2go.airport.hamburg"
  }, ];

  $scope.rental = state.rental;

}]).factory('state', function() {

var rental = {
  car2go: {
    airport: {
      berlin: false,
      hamburg: false
    }
  }
};

return {
  rental: rental
};
});

现在我想使用 ng-repeat：

<div class="form-group">
  <div class="input-group">
    <div class="checkbox">
      <span ng-repeat="airport in airports">
    <label>
      <input type="checkbox"
             ng-model="airport.model">
                {{airport.name}}
      </label>
      <br>
      </span>
    </div>
  </div>
</div>

使用 ng-repeat 表单正在修改 airports 对象（airports[1].model=true/false 和 airports[2].model=true/false）。

它应该只使用该机场对象的字符串（rental.car2go.airport.berlin 和rental.car2go.airport.hamburg）并修改出租对象。我正在寻找一种将字符串传递给 ng-model 的方法，而不是 airports 对象。我该怎么做？

编辑：删除指令，新的 plnkr

【问题讨论】：

不清楚您为什么声称它无法正常工作。复选框的值是 true 或 false，因此替换如您所见（在两个示例中）。
它可能工作正常，但不是我想要的 ;) 检查 plunkr (plnkr.co/edit/HfRoCgPfdoZNxmTtDLf7?p=preview) 我想修改一个不同的对象（rental.car2go.airport.xxx）而不是那个被传递给 ng-repeat（机场）。
angular 不支持这种绑定ng-model 的方式。我尝试了一些选项，例如使用 ng-modelOptions getter/setter，但找不到有效的选项。您可能需要执行一些操作，例如将复选框绑定到airport 上的属性，然后将值复制到ng-click 函数中的rental 数组。

标签： angularjs angularjs-ng-repeat angular-ngmodel

【解决方案1】：

您要更改的 JSON 是：

$scope.airports = [{
    "airport": "Berlin",
    "model": "rental.car2go.airport.berlin"
  }, {
    "airport": "Hamburg",
    "model": "rental.car2go.airport.hamburg"
  }, ];

其中 `airports[0].model="rental.car2go.airport.berlin"，表示字符串 rental.car2go.airport.berlin。此字符串替换为 TRUE 或 FALSE。我猜你希望 rental.car2go.airport.berlin 被解释为一个结构，对吧？嗯，它不是一个结构，而只是一个字符串。

【讨论】：

是的，我早就料到了。那么解决方案看起来像rental.car2go.airport.berlin 被修改的对象？
你必须正确地构建你的 JSON，这样每个元素实际上都是一个对象，就像“airport”和“model”一样。
$scope.rental 和 $scope.airports 必须保持不同的对象
您可以添加出租对象的层次结构。我建议您查看一些有关 JSON 的文档，如果我的回答有帮助，请投票。

【解决方案2】：

确实正如@Claies 建议的那样，我必须将值复制到出租数组中。我为此使用了ng-change 函数。新的 ng-repeat：

<span ng-repeat="airport in airports">
  <label>
    <input type="checkbox"
           ng-model="airport.model"
           ng-change="changeAirport(airport)">
    {{airport.name}}
  </label>
  <br>
</span>

在控制器中：

$scope.changeAirport = function(airport) {
  var airportName = $filter('lowercase')(airport.name);
  state.rental.car2go.airport[airportName] = airport.model;
}

【讨论】：