javascript - 为什么我的 Angular 代码不起作用?

标签 javascript angularjs

嘿,我是 angular 的新手,我无法让它工作 我创建了一个新项目,我将 angular.min.js 文件放入其中,但这段代码不起作用,我不知道为什么它什么也没显示 请帮助我理解原因。

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', function(){
  this.persons = plists;
});

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();
<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl as ppl">
<br />
<div ng-repeat="people in ppl.persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

最佳答案

请参阅此以进行说明 $scope vs this in AngularJS controller

查看工作代码。

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', ['$scope',function($scope){
  $scope.persons = plists;
}]);

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();
<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl">
<br />
<div ng-repeat="people in persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

关于javascript - 为什么我的 Angular 代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33758456/

相关文章:

JavaScript 未显示正确的图像

javascript - 单击按钮时元素未隐藏

javascript - 标题在应用 tablesorter 插件时搞砸了

java - jqGrid : show/hide columns while Updating and Inserting data

javascript - Angular.js 使用 html2js 将指令与外部模板联合测试 - 无法加载模板

javascript - 当我获得所有实例化部件后,如何在 Angular SPA 中重绘 ITHit Ajax 文件浏览器?

javascript - 使用 Angular JavaScript 将 MySQL 时间戳或 PHP 日期时间转换为本地客户端日期时间

javascript - 在 Angular JS 中,模型值的变化没有反射(reflect)在指令的模板中

javascript - 如何在选择选择框值时将参数作为 POST 数据传递,这将重新加载同一页面?

angularjs - Yeoman/Grunt/Angular 中的 dist 构建目标文件夹是什么?