Question

我今天刚开始使用AngularJS;所以我还是很新。我有以下代码：

<!DOCTYPE html>
<html ng-app>
<head>
    <title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">

<div class="container"> 
<h3>Looping with the ng-repeat Directive</h3>

<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
    <li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">
function SimpleController($scope){
    $scope.customers=[
        {name:'Frank Ben',city:'Bamenda'},
        {name:'Brize Tankanon',city:'Marous'},
        {name:'Brendaline M.',city:'Bafoussam'},
        {name:'Alexander Bings',city:'Buea'}
    ];
}

当我运行上面的代码时，这就是我得到的：

当我从body标签中删除controller指令时，我得到了这个：

我不知道问题出在哪里。我想展示那些名字和城市。我将非常感谢你的帮助。谢谢！

Answer 1

尝试使用内置依赖注入在angularjs app中注册控制器，换句话说：

<script type="text/javascript">
  var app = angular.module("app", []);

app.controller('SimpleController', ['$scope', function SimpleController($scope){
    $scope.customers=[
        {name:'Frank Ben',city:'Bamenda'},
        {name:'Brize Tankanon',city:'Marous'},
        {name:'Brendaline M.',city:'Bafoussam'},
        {name:'Alexander Bings',city:'Buea'}
    ];
}]);

  </script>

然后将ng-app更改为ng-app="app"。

这是JSBin的工作示例：http://jsbin.com/ficozajena/1/edit?html,js,output

在angularJS中显示视图时出现问题

1 个答案: