Question

我是角度JS的新手。我已按照说明操作了。

首先，我使用ng-init指令搜索数据。我仍然在这种情况下使用静态数据。在我开始将它与laravel结合之前。我需要知道角度的基本功能。

一切顺利。但是，当我将其更改为ng-controller，并从范围访问静态数据时，我得到的只是错误。

这是我的源代码：

html：

<div ng-controller="DataPeople">
    <input type='text' ng-model="search" >
    <ul>
        <li ng-repeat="lon in listofname | filter:search">
      name : {{ lon.name }} |  city : {{ lon.city }}
    </li>
    </ul>
</div>

javascript：

function DataPeople($scope) {
    $scope.listofname = [
                            {name:'guta', city:'tangerang selatan'}, 
                            {name:'john', city:'jakarta utara'}, 
                            {name: 'oki', city:'singapura'}, 
                            {name: 'billy', city:'singapura'}, 
                            {name: 'george', city:'bandung'}
                            ];

}

Uncaught SyntaxError：意外的令牌： http://errors.angularjs.org/1.5.0/ng/areq?p0=DataPeople&p1=not%20a%20function%2C%20got%20undefined

哦，这也是我的小提琴。 http://jsfiddle.net/dq8r196v/3/

希望你们能帮帮我。

非常感谢。

Answer 1

如果您使用的是AngularJS 1.4及更新版本，则代码应如下所示

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <div ng-controller="DataPeople">
        <input type='text' ng-model="search">
        <ul>
            <li ng-repeat="lon in listofname | filter:search">
                name : {{ lon.name }} | city : {{ lon.city }}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    var app = angular.module("app", []);

    app.controller('DataPeople', ['$scope', function($scope) {
        $scope.listofname = [{
            name: 'guta',
            city: 'tangerang selatan'
        }, {
            name: 'john',
            city: 'jakarta utara'
        }, {
            name: 'oki',
            city: 'singapura'
        }, {
            name: 'billy',
            city: 'singapura'
        }, {
            name: 'george',
            city: 'bandung'
        }];
    }]);
    </script>
</body>
</html>

关于迁移，使用您可在此处阅读的模块注册控制器 https://docs.angularjs.org/guide/migration#migrating-from-1-2-to-1-3

您的问题中提供的代码是针对过时版本的AngularJS 1.2

Answer 2

HTML文件：

<div ng-app="myApp" ng-controller="DataPeople">
  <input type='text' ng-model="search" >
  <ul>
    <li ng-repeat="lon in listofname | filter:search">
      name : {{ lon.name }} |  city : {{ lon.city }}
    </li>
  </ul>
</div>

.js文件：

angular.module('myApp', [])

    .controller('DataPeople', ['$scope', function($scope) {
        $scope.listofname = [
          {name:'guta', city:'tangerang selatan'}, 
          {name:'john', city:'jakarta utara'}, 
          {name: 'oki', city:'singapura'}, 
          {name: 'billy', city:'singapura'}, 
          {name: 'george', city:'bandung'}
        ];
    }])

working fiddle

Answer 3

您的错误日志显示您正在使用angular 1.5，而在angular 1.5中，您不会将全局功能声明为控制器。请尝试以下已修改版本

<强> PLUNKER： http://plnkr.co/edit/Nhmg9FYJlHy9IwVsIJ0x?p=preview

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>

<body ng-app="myApp">
<div ng-controller="DataPeople">
    <input type='text' ng-model="search" >
    <ul>
        <li ng-repeat="lon in listofname| filter:search">
      name : {{ lon.name }} |  city : {{ lon.city }}
    </li>
    </ul>
</div>

<script type="text/javascript">
(function(angular) {
  'use strict';
var myApp = angular.module('myApp', []);

myApp.controller('DataPeople', ['$scope', function($scope) {
    $scope.listofname = [
                            {name:'guta', city:'tangerang selatan'}, 
                            {name:'john', city:'jakarta utara'}, 
                            {name: 'oki', city:'singapura'}, 
                            {name: 'billy', city:'singapura'}, 
                            {name: 'george', city:'bandung'}
                            ];
}]);
})(window.angular);
</script>
</body>
</html>

Answer 4

您需要指定ng-app：http://jsfiddle.net/2Lh1y36m/

＆＃13;

function DataPeople($scope) {
    $scope.listofname = [
      {name:'guta', city:'tangerang selatan'}, 
      {name:'john', city:'jakarta utara'}, 
      {name: 'oki', city:'singapura'}, 
      {name: 'billy', city:'singapura'}, 
      {name: 'george', city:'bandung'}
    ];
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DataPeople">
  <input type='text' ng-model="search">
  <ul>
    <li ng-repeat="lon in listofname | filter:search">
      name : {{ lon.name }} | city : {{ lon.city }}
    </li>
  </ul>
</div>

＆＃13;

Answer 5

试试这个： HTML：

<div ng-App="myApp" ng-controller="DataPeople">
    <input type='text' ng-model="search" >
    <ul>
        <li ng-repeat="lon in listofname | filter:search">
      name : {{ lon.name }} |  city : {{ lon.city }}
    </li>
    </ul>
</div>

的javascript：

<script>
var app = angular.module('myapp', []);
app.controller('DataPeople', function($scope) {
                            $scope.listofname = [
                            {name:'guta', city:'tangerang selatan'}, 
                            {name:'john', city:'jakarta utara'}, 
                            {name: 'oki', city:'singapura'}, 
                            {name: 'billy', city:'singapura'}, 
                            {name: 'george', city:'bandung'}
                            ];
});
</script>

Answer 6

如前所述，您需要定义ng-app。

<div ng-app="your-app-name" ng-controller="DataPeople">

此外，您需要在应用程序中注册Controller。

var myApp = angular.module('your-app-name',[]);

myApp.controller('DataPeople', ['$scope', function($scope) {
    $scope.listofname = [
       {name:'guta', city:'tangerang selatan'}, 
       {name:'john', city:'jakarta utara'}, 
       {name: 'oki', city:'singapura'}, 
       {name: 'billy', city:'singapura'}, 
       {name: 'george', city:'bandung'}
   ];
]);

Ng控制器ng模型不适用于角度js

6 个答案: