根据预设变量动态使用 ng-Model

Use ng-Model dynamically based on preset variable

所以我有以下错误:

假设我有以下模型:

Item {
  key: string,
  name: string,
  data: {
    sectionA: string,
    sectionB: string,
    ...
    sectionZ: string
  }
}

我想根据数组 [A-Z] 和循环动态绑定输入文本

房间数 = ["A", "B", ..., "Z"]

<div
        class="item"
        ng-repeat="room in rooms"
      >

    <input type="text"
           name="{{ item.key }}"
           class="form-control"
           ng-model="item.data.section"+ room >
</div>

似乎当我循环时,我从 coffeescript 收到关于模型无效的错误,所以我的问题是如何为模型设置正确的值。

如果您使用 item.data.section,那么这将变为 undefined,因为您的对象中没有名为 section 的键,然后 ng-model 将是 undefined + room,结果是 undefined.

您可以使用 ng-model="item.data['section' + room]" 来指代您的密钥。您在下面有一个工作示例。我添加了一个更新函数来查看 ng-model 绑定是否真的有效。

var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
  $scope.item = {
    key: "itemKey",
    name: "itemName",
    data: {
      sectionA: "section A String ",
      sectionB: "section B String ",
      sectionZ: "section Z String "
    }
  };

  $scope.rooms = ['A', 'B', 'Z'];

  let i = 0;
  $scope.updateValues = function() {
    setInterval(function() {
      Object.keys($scope.item.data).forEach(key => {
        let v = $scope.item.data[key];
        v = v.substr(0, v.length - 1) + i;

        $scope.item.data[key] = v;
        i = (++i) % 10;
      });

      setTimeout(function() {
        $scope.$apply()
      }, 0);
    }, 1000);
  }

  $scope.updateValues();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="myController">
    <div class="item" ng-repeat="room in rooms">
      {{ room }}
      <input type="text" name="{{ item.key }}" class="form-control" ng-model="item.data['section' + room]">
    </div>
  </div>
</div>

干杯!