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

时间:2019-01-19 13:06:55

标签: angularjs coffeescript

所以我有以下错误:

鉴于我有以下模型:

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中收到关于模型无效的错误,所以我的问题是如何为模型设置正确的值。

1 个答案:

答案 0 :(得分:0)

如果您使用item.data.section,那么它将变为undefined,因为您的对象中没有名为section的键,然后ng-model将是{ {1}},得到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();
});

干杯!