Ng-controller ng-model not working in angular js

Question

I'm newbie in angular JS. I have already follow the instructions.

First I'm using ng-init directive to search data. I still using static data for this case. Before I jump into combining it with laravel. I need to know the basic function in angular.

Everything run smooth. But when i change it into ng-controller, and access static data from scope, all i got is error.

This is my source code :

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: Unexpected token : http://errors.angularjs.org/1.5.0/ng/areq?p0=DataPeople&p1=not%20a%20function%2C%20got%20undefined

ohya this up on my fiddle too. http://jsfiddle.net/dq8r196v/3/

Hope you guys can help me.

Thanks a lot.

Global functions are not controllers anymore, for a loooong time. Use the official documentation, or at least find a more recent tutorial. docs.angularjs.org/guide/controller — JB Nizet
– JB Nizet, Commented Feb 27, 2016 at 13:25
@JBNizet and if OP wants to use an older version, I assume you should shoot him? — Shomz
– Shomz, Commented Feb 27, 2016 at 13:41
@Shomz What makes you think he wants an old version. You seem to be stuck at 1.2.23, which came out 1.5 years ago. The OP uses 1.5.0, which came out 25 days ago. — JB Nizet
– JB Nizet, Commented Feb 27, 2016 at 13:43
Can you read the damn error message? I doubt the OP create his application on jsfiddle. He uses 1.5.0, as the error message shows. He most probably tried to reproduce the error on JSFiddle to share the code with us. But JSFiddle sucks hard, and still uses 1.2.23 by default. Don't blame me for that. Instead, fix your damn answer, and I'll remove my downvote. And stop insulting people — JB Nizet
– JB Nizet, Commented Feb 27, 2016 at 13:48

Michael · Accepted Answer · 2016-02-27 13:47:32Z

If you are using AngularJS 1.4 and newer, your code should look like this

<!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>

About migrate, register your controllers with modules you can read here https://docs.angularjs.org/guide/migration#migrating-from-1-2-to-1-3

The code presented in your question is for obsolete version AngularJS 1.2

Sarantis Tofas · Accepted Answer · 2016-02-27 13:36:36Z

2

HTML file:

<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 File:

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

answered Feb 27, 2016 at 13:36

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Comments

Sunil Lama · Accepted Answer · 2016-02-27 14:00:41Z

1

Your error log shows that you are using angular 1.5 and in angular 1.5, you don't declare global functions as controllers. Try the following Edited version

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>

edited Feb 27, 2016 at 14:00

answered Feb 27, 2016 at 13:23

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

9 Comments

JB Nizet Over a year ago

1.2.23 is completely obsolete. That code won't work with a recent version of angular.

Sunil Lama Over a year ago

for the sake of his answer and confusion it does work, i appreciate your helping downvote when people try to help :)

JB Nizet Over a year ago

No, it doesn't. As the error message clearly shows, he's using 1.5.0. So your answer won't help.

Sunil Lama Over a year ago

didn't account for that log. Thanks for the correction. i will probably edit it.

Shomz Over a year ago

I don't care about the rep, but was shocked by the behaviour of a high-rep member. You should set standards for others, not behave like that. As I said, I took OP's code and made it work. I don't care what version he plans to use, neither should you or we'll end up having those "use jquery" answers. My answer works, no fixing needed unless I hear from OP.

|

Andreas Jägle · Accepted Answer · 2016-02-27 13:33:30Z

0

As already mentioned, you need to define an ng-app.

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

Additionally you need to register your Controller with the app.

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'}
   ];
]);

answered Feb 27, 2016 at 13:33

Andreas Jägle

12.4k3 gold badges33 silver badges33 bronze badges

Comments

Shomz · Accepted Answer · 2016-02-27 13:23:08Z

0

You need to specify ng-app: http://jsfiddle.net/2Lh1y36m/

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'}
    ];
}

<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>

answered Feb 27, 2016 at 13:23

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

2 Comments

JB Nizet Over a year ago

1.2.23 is completely obsolete. That code won't work with a recent version of angular. And the OP is using 1.5.0.

Shomz Over a year ago

The fiddle uses the original OP code and I made it work without caring which version he decided to use... Thanks for the downvote.

Faizan · Accepted Answer · 2016-02-27 13:33:01Z

0

try this: 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>

answered Feb 27, 2016 at 13:33

Faizan

13 bronze badges

2 Comments

JB Nizet Over a year ago

You have case-sensitivity issues: ng-App instead of ng-app, myApp instead of myapp.

JB Nizet Over a year ago

Why don't you fix them?

Collectives™ on Stack Overflow

Ng-controller ng-model not working in angular js

6 Answers 6

Comments

Comments

9 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

9 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related