AngularJS新手求助：使用ng-repeat和ng-init遍历JSON数组失败

嘿，刚接触AngularJS遇到这种小bug太正常啦！我帮你找出问题所在了，咱们一步步来：

问题根源：变量名大小写不匹配 #

AngularJS对变量名是区分大小写的！你在ng-init里定义的数组变量是myFavLan（最后一个字母L是大写），但在ng-repeat里写成了myFavlan（最后一个L是小写），这就导致Angular找不到对应的变量，自然没法渲染内容啦。

修正后的完整代码 #

<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS ng-repeat Demo</title>
</head>
<body>
<h1>ng-repeat Demo</h1>
<hr />
<div ng-init="myFavLan=[{name:'PHP',extension:'.php'}, {name:'Javascript',extension:'.js'}, {name:'HTML',extension:'.html'} ]">
  <p ng-repeat="language in myFavLan"> 
    Name : {{ language.name }} <br /> 
    Extension : {{ language.extension }} 
  </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>
</html>

额外小建议（可选） #

虽然用ng-init能快速测试，但在实际项目里更推荐把数据放在控制器里，这样代码更清晰易维护。比如可以改成这样：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ng-repeat Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFavLan = [
    {name:'PHP',extension:'.php'}, 
    {name:'Javascript',extension:'.js'}, 
    {name:'HTML',extension:'.html'}
  ];
});
</script>
</head>
<body ng-controller="myCtrl">
<h1>ng-repeat Demo</h1>
<hr />
<p ng-repeat="language in myFavLan"> 
  Name : {{ language.name }} <br /> 
  Extension : {{ language.extension }} 
</p>
</body>
</html>

这样结构更符合AngularJS的最佳实践，也方便后续扩展功能哦～

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