如何基于预设数组动态为ng-Model绑定Item的data.section属性？

嘿，我懂你碰到的麻烦了——你想通过循环rooms数组来动态绑定item.data里的sectionA到sectionZ属性，但原来的写法在CoffeeScript里提示模型无效，这是因为ng-model需要的是一个合法的表达式，而不是字符串拼接的结果。

问题根源 #

你原来的写法ng-model="item.data.section"+ room会被AngularJS当成两个独立的部分：字符串"item.data.section"和变量room，而不是一个完整的、用来访问对象属性的表达式，所以CoffeeScript会判定这个模型绑定不合法。

正确的解决方案 #

在JavaScript/CoffeeScript里，访问对象的动态属性需要用括号表示法（而不是点表示法），也就是通过obj['propertyName']的形式来访问。针对你的场景，应该把ng-model写成：

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

这样AngularJS就能正确解析表达式，动态拼接出sectionA、sectionB...sectionZ这些属性名，从而完成绑定。

额外提示 #

如果你的item.data一开始没有初始化sectionA到sectionZ这些属性，可能会出现绑定失效的情况（因为AngularJS无法绑定到undefined的属性）。你可以在CoffeeScript里提前初始化这些属性：

rooms = ["A", "B", ... , "Z"]
item.data = {}
for room in rooms
  item.data["section#{room}"] = "" # 初始化空字符串

这样循环绑定的时候，每个输入框都能正确关联到已存在的属性，避免出现意外问题。

内容的提问来源于stack exchange，提问作者raul782