Question

TLDR：这是问题的一部分：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[1].model=true/false和airports[2].model=true/false）。

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

编辑：删除了指令，新的plnkr

Answer 1

您要更改的JSON是：

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

其中`Airports [0] .model =＆＃34; rental.car2go.airport.berlin＆＃34;，表示字符串 rental.car2go.airport.berlin 。此字符串替换为TRUE或FALSE。我想您希望 rental.car2go.airport.berlin 被解释为一个结构，对吧？嗯，它不是一个结构，只是一个字符串。

Answer 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;
}

使用ng-repeat和ng-model修改错误的对象

2 个答案: