代码之家 › 专栏 › 技术社区 › mles

对ng模型使用ng repeat会修改错误的对象

angular-ngmodel angularjs-ng-repeat angularjs

mles · 技术社区 · 8 年前

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

<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模型而不是airports对象的方法。我该怎么做?

编辑:删除指令,新plnkr

2 回复 | 直到 8 年前

FDavidov 8 年前

您要更改的JSON是:

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

其中`airports[0].model=“render.car2go.airport.berlin”,表示字符串 租赁.car2go.airport.berlin 。此字符串替换为TRUE或FALSE。我想你是在期待 租赁.car2go.airport.berlin 被解释为一种结构,对吗?嗯,它不是一个结构,只是一个字符串。

mles 8 年前

事实上,正如@Claies建议的那样,我必须将价值复制到租赁阵列中。我用了一个 ng-change 功能。新ng重复:

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前