AngularJS中使用ng-repeat遍历JSON对象时的异常问题排查

这问题的根源很明显——你在定义vm.locOptionFields时，没有把多个对象放进数组里，导致JavaScript解析时只把第一个对象赋值给了这个变量，后面的两个对象完全被忽略了。

错误原因拆解 #

你的原代码：

vm.locOptionFields = { "locOptionFieldKey": 1, "fieldID": "Allow additional material to be added to Orders that have been processed but not shipped", "stringNum": 11, "taskKey": 12, "type": "checkbox", "seqNum": 13, "comboOptionRefKey": 1 }, { "locOptionFieldKey": 2, "fieldID": "Require requested delivery date", "stringNum": 12, "taskKey": 13, "type": "number", "seqNum": 14, "comboOptionRefKey": 1 }, { "locOptionFieldKey": 3, "fieldID": "Default Requested Delivery Date into Promise Date", "stringNum": 13, "taskKey": 14, "type": "combobox", "seqNum": 15, "comboOptionRefKey": 2 };

由于赋值运算符=的优先级比逗号运算符高，这行代码实际上等价于：

(vm.locOptionFields = {第一个对象}), {第二个对象}, {第三个对象};

也就是说，vm.locOptionFields最终只拿到了第一个对象，后面两个对象只是被JavaScript求值，但没有绑定到任何变量，相当于白写了。

当你用ng-repeat="loc in vm.locOptionFields"时，AngularJS会把单个对象当成键值对集合来遍历，所以生成的列表项数量等于第一个对象的属性个数。而{{loc.type}}为空，是因为此时loc是对象的属性值（比如数字1、字符串"Allow additional..."等），这些值本身没有type属性，自然输出空内容。

修复方案 #

把所有对象用数组括号[]包裹，让vm.locOptionFields变成一个包含三个对象的数组：

vm.locOptionFields = [
  { 
    "locOptionFieldKey": 1, 
    "fieldID": "Allow additional material to be added to Orders that have been processed but not shipped", 
    "stringNum": 11, 
    "taskKey": 12, 
    "type": "checkbox", 
    "seqNum": 13, 
    "comboOptionRefKey": 1 
  },
  { 
    "locOptionFieldKey": 2, 
    "fieldID": "Require requested delivery date", 
    "stringNum": 12, 
    "taskKey": 13, 
    "type": "number", 
    "seqNum": 14, 
    "comboOptionRefKey": 1 
  },
  { 
    "locOptionFieldKey": 3, 
    "fieldID": "Default Requested Delivery Date into Promise Date", 
    "stringNum": 13, 
    "taskKey": 14, 
    "type": "combobox", 
    "seqNum": 15, 
    "comboOptionRefKey": 2 
  }
];

之后你的HTML代码：

<li ng-repeat="loc in vm.locOptionFields"> {{loc.type}} </li>

就能正常遍历三个对象，输出每个对象的type属性值了。

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