AngularJS数据绑定失效求助：ng-repeat无法正常渲染数据

核心问题与修复方案 #

1. 插值表达式混入特殊不可见字符 #

你HTML代码里的{​​​​​​{​​​​​​emp.name}​​​​​​}​​​​​​这类写法，{{和}}之间存在零宽空格之类的不可见特殊字符，导致Angular无法正确解析插值表达式，自然无法渲染出数据。

解决：
把所有插值表达式改成干净的{{ 变量名 }}格式，比如{{ emp.name }}、{{ emp.gender }}，彻底清除那些隐藏的特殊字符。

2. 员工数据缺少city属性 #

你定义的employees数组中，每个员工对象都没有city字段，但HTML里却在渲染emp.city，所以这一列会显示为空。

解决二选一：

• 给每个员工对象添加city属性（参考下方修正后的代码）；
• 直接删除HTML中的City表头和对应的<td>{{ emp.city }}</td>列。

修正后的完整代码 #

JavaScript代码（script.js）

var app = angular.module("myModel", []);

app.controller("myController", function($scope) {
  var employees = [
    {name:"Ben", dateOfBirth:new Date("November 23,1980"), gender:"Male", salary:55000, city:"New York"},
    {name:"Sara", dateOfBirth:new Date("May 05,1970"), gender:"Female", salary:68000, city:"London"},
    {name:"Mark", dateOfBirth:new Date("August 15,1974"), gender:"Male", salary:57000, city:"Paris"},
    {name:"Pam", dateOfBirth:new Date("October 27,1981"), gender:"Female", salary:70000, city:"Sydney"},
    {name:"Todd", dateOfBirth:new Date("December 3,1989"), gender:"Male", salary:45000, city:"Toronto"}
  ];
  $scope.employees = employees;
});

HTML代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myModel">
  <div ng-controller="myController">
    Search : <input type="text" placeholder="Search employees" ng-model="searchText" /><br />
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Gender</th>
          <th>Salary</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="emp in employees | filter:searchText">
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender }}</td>
          <td>{{ emp.salary }}</td>
          <td>{{ emp.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

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