CODEWITHSUNDEEP
angularjsangularjs-controller
Livvy Jeffs
Livvy Jeffs

Reputation: 159

SimpleController Issue

Can't get SimpleController to read correctly, is there anything I am doing wrong or is this an environment issue?

When I was using ng-init the code was working fine, now not registering at all. I've checked that it matches word-for-word and am a bit mystified, and new to Angular.JS.

 <!DOCTYPE html>
<html ng-app>
<head>
</head>
<body>

    <div ng-controller="SimpleController">

        Name:
        <br />

        <input type="text" ng-model="name" />
        <br />
        <ul>
            <li ng-repeat="cust in customers | filter: name | orderBy: city">{{ name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>

    </div>

    <script src="../angular/angular.min.js"></script>

    <script>

        function SimpleController($scope){
            $scope.customers = [
            {name:'John Smith', city: 'Phoenix'}, 
            {name: 'Margo Padler', city: 'Denver'}, 
            {name: 'Jane Fonda', city: 'New York City'}
            ];
        }

    </script>

</body>

</html>

Upvotes: 0

Views: 100

Answers (3)

Raphael Amoedo
Raphael Amoedo

Reputation: 4465

It may be useful for others like me.

The problem was the syntax, that is deprecated and is not compatible to Angular 1.3

So, here's the right approach:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title>SimpleController</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
</head>
<body ng-controller="SimpleController">
    <ul>
        <li data-ng-repeat="emp in employees">
            {{emp.name}}
        </li>

    </ul>

<script>
    angular.module('myApp', []).controller('SimpleController', function($scope){

        $scope.employees = [
        {'name' : 'emp1', 'id' : 'id1'},
        {'name' : 'emp2', 'id' : 'id2'},
        {'name' : 'emp3', 'id' : 'id3'}
        ];
    });
</script>

Note: <html ng-app="myApp">, angular.module('myApp', []).controller('SimpleController', function($scope){ and the end of this function: }); instead of }

Upvotes: 0

tine
tine

Reputation: 23

have you solve it? i'm having the same problem. My error is 

"SimpleController is not a function". got undefined.

But maybe yours might be solve with from

 <li ng-repeat="cust in customers | filter: name | orderBy: city

to

<li ng-repeat="cust in customers | filter: name | orderBy: 'city'

It now works on mine. We need to serve the files so the controller will work.

So you may

or use cdn to host angular.min.js

or if you want to host your own create a server to host your files.

Upvotes: 0

dmahapatro
dmahapatro

Reputation: 50245

This works as expected. You are missing cust.name. Another thing to note here, if you only want to filter by customer name and not by the city name then the filter has to change as:

ng-repeat="cust in customers | filter: {'name': name} | orderBy: city"

by making sure that the filter applies only to the name.

Upvotes: 2

Related Questions