无法从Angular.js中的控制器获取数据

I'm pretty much new to AngularJS. In fact, this is my first day. What I'm trying to do here is to fetch data from a controller I made and show it in the view. But I don't know why, it's not simply working.

我对AngularJS很新。事实上，这是我的第一天。我在这里要做的是从我制作的控制器中获取数据并在视图中显示它。但我不知道为什么，这不仅仅是工作。

My data is a list of students. All I'm trying to do is to show the list of students in a list order and filter the list according to the name entered in a textbox.

我的数据是学生名单。我所要做的就是按列表顺序显示学生列表，并根据在文本框中输入的名称过滤列表。

My code is pretty simple:

我的代码非常简单：

<!DOCTYPE html>
<html ng-app>

  <head>
    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>

  <body>
    <h1>Hello!</h1>

      Student Name:
     <br />
      <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container" data-ng-controller="simpleController">

      <ul>
        <li ng-repeat="stud in students | filter:sname  | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
      </ul>

    </div>

    <script>
      function simpleController($scope)
      {
        $scope.students=[
               {firstname:'Jordan',lastname:'Rains'},
               {firstname:'Michael',lastname:'Jordan'},
               {firstname:'John',lastname:'Doe'},
               {firstname:'John',lastname:'Smith'},
               {firstname:'Simcha',lastname:'Michelle'},
               {firstname:'Sydney',lastname:'Rivers'},
               {firstname:'Summer',lastname:'Rose'},
               {firstname:'Georgia',lastname:'Schubert'},
               {firstname:'Rosalie',lastname:'Fayadh'}
              ];

      }      
    </script>    
  </body>
</html>

Here's a fiddle.

这是一个小提琴。

3 个解决方案

#1

You need to register your controller!

你需要注册你的控制器！

var myApp = angular.module('myApp',[]);

myApp.controller('simpleController', ['$scope', simpleController]);

And then you also need to put a name into ng-app.

然后你还需要在ng-app中加上一个名字。

<html ng-app="myApp">

#2

I've updated your JSFiddle:

我已经更新了你的JSFiddle：

HTML:

HTML：

<div ng-app="app">
  <div ng-controller="simpleController">
    <h1>Hello Student!</h1>   Student Name:<br/>
    <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container">
      <ul>
        <li ng-repeat="stud in students | filter:sname  | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
      </ul>
    </div>
  </div>
</div>

Angular:

角度：

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


app.controller('simpleController', function($scope) {

        $scope.students=[
               {firstname:'Jordan',lastname:'Rains'},
               {firstname:'Michael',lastname:'Jordan'},
               {firstname:'John',lastname:'Doe'},
               {firstname:'John',lastname:'Smith'},
               {firstname:'Simcha',lastname:'Michelle'},
               {firstname:'Sydney',lastname:'Rivers'},
               {firstname:'Summer',lastname:'Rose'},
               {firstname:'Georgia',lastname:'Schubert'},
               {firstname:'Rosalie',lastname:'Fayadh'}
              ]; 
});

#3

you need to define an angular module:

你需要定义一个角度模块：

      angular.module('app', []).controller('simpleController', simpleController);

see jsFiddle

见jsFiddle

#1