admin管理员组

文章数量:1025218

What am i doing wrong here, I am new to angular, its showing the error above, here is my code

<script type="text/javascript" src=".3.9/angular.js"></script>
        <script>
            function simpleController($scope){
                $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];
            }
        </script>

    </head>
    <body>
        <div class="container-fluid" ng-controller="simpleController">
            Name: <input type="text" ng-model="name"/>
            <ul>
                <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
            </ul>
        </div>
    </body>   

What am i doing wrong here, I am new to angular, its showing the error above, here is my code

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.3.9/angular.js"></script>
        <script>
            function simpleController($scope){
                $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];
            }
        </script>

    </head>
    <body>
        <div class="container-fluid" ng-controller="simpleController">
            Name: <input type="text" ng-model="name"/>
            <ul>
                <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
            </ul>
        </div>
    </body>   
Share Improve this question asked Jan 15, 2015 at 9:30 alphyalphy 2913 silver badges19 bronze badges 1
  • 1 If you're using the Angular JS in 60 Minutes tutorial, the instructions will stop working with newer version of Angular because it will not allow you to use a controller in the global scope - see this post: stackoverflow./questions/24894870/… – TriumphST Commented May 21, 2016 at 21:59
Add a ment  | 

3 Answers 3

Reset to default 7

You haven't created properly your controller. Please see the following snippet.

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

myApp.controller('simpleController', ['$scope', function($scope) {
    $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];    
}]);
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="myApp" ng-controller="simpleController">
    Name: <input type="text" ng-model="name"/>
    <ul>
        <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
    </ul>
</div>

Or at least you need to pub ng-app directive in parent html tag please see demo below

 function simpleController($scope) {
   $scope.customers = [{
     name: 'Alphy Poxy',
     city: 'Mbita'
   }, {
     name: 'Kibaki Watson',
     city: 'Kikuyu'
   }, {
     name: 'John Legend',
     city: 'Lake'
   }, {
     name: 'Sony',
     city: 'HB'
   }];
 }
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div class="container-fluid" ng-controller="simpleController">


    Name:
    <input type="text" ng-model="name" />
    <ul>
      <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
    </ul>
  </div>
</div>

Best way is to really to do as @Christos is saying.

Or you could add:

 1. add np-app along with a module name  ( ng-app="app" )
 2. add controller assigning it in.  (  app.controller('SimpleController', SimpleController);
    <script>
        function simpleController($scope){
            $scope.customers=[
                {name:'Alphy Poxy',city:'Mbita'},
                {name:'Kibaki Watson',city:'Kikuyu'},
                {name:'John Legend',city:'Lake'}, 
                {name:'Sony',city:'HB'}
            ];
        }
        app.controller('SimpleController', SimpleController);
    </script>

</head>
<body>
    <div class="container-fluid" ng-controller="simpleController" ng-app="app">
        Name: <input type="text" ng-model="name"/>
        <ul>
            <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
        </ul>
    </div>
</body>   

What am i doing wrong here, I am new to angular, its showing the error above, here is my code

<script type="text/javascript" src=".3.9/angular.js"></script>
        <script>
            function simpleController($scope){
                $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];
            }
        </script>

    </head>
    <body>
        <div class="container-fluid" ng-controller="simpleController">
            Name: <input type="text" ng-model="name"/>
            <ul>
                <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
            </ul>
        </div>
    </body>   

What am i doing wrong here, I am new to angular, its showing the error above, here is my code

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.3.9/angular.js"></script>
        <script>
            function simpleController($scope){
                $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];
            }
        </script>

    </head>
    <body>
        <div class="container-fluid" ng-controller="simpleController">
            Name: <input type="text" ng-model="name"/>
            <ul>
                <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
            </ul>
        </div>
    </body>   
Share Improve this question asked Jan 15, 2015 at 9:30 alphyalphy 2913 silver badges19 bronze badges 1
  • 1 If you're using the Angular JS in 60 Minutes tutorial, the instructions will stop working with newer version of Angular because it will not allow you to use a controller in the global scope - see this post: stackoverflow./questions/24894870/… – TriumphST Commented May 21, 2016 at 21:59
Add a ment  | 

3 Answers 3

Reset to default 7

You haven't created properly your controller. Please see the following snippet.

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

myApp.controller('simpleController', ['$scope', function($scope) {
    $scope.customers=[
                    {name:'Alphy Poxy',city:'Mbita'},
                    {name:'Kibaki Watson',city:'Kikuyu'},
                    {name:'John Legend',city:'Lake'}, 
                    {name:'Sony',city:'HB'}
                ];    
}]);
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="myApp" ng-controller="simpleController">
    Name: <input type="text" ng-model="name"/>
    <ul>
        <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
    </ul>
</div>

Or at least you need to pub ng-app directive in parent html tag please see demo below

 function simpleController($scope) {
   $scope.customers = [{
     name: 'Alphy Poxy',
     city: 'Mbita'
   }, {
     name: 'Kibaki Watson',
     city: 'Kikuyu'
   }, {
     name: 'John Legend',
     city: 'Lake'
   }, {
     name: 'Sony',
     city: 'HB'
   }];
 }
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div class="container-fluid" ng-controller="simpleController">


    Name:
    <input type="text" ng-model="name" />
    <ul>
      <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
    </ul>
  </div>
</div>

Best way is to really to do as @Christos is saying.

Or you could add:

 1. add np-app along with a module name  ( ng-app="app" )
 2. add controller assigning it in.  (  app.controller('SimpleController', SimpleController);
    <script>
        function simpleController($scope){
            $scope.customers=[
                {name:'Alphy Poxy',city:'Mbita'},
                {name:'Kibaki Watson',city:'Kikuyu'},
                {name:'John Legend',city:'Lake'}, 
                {name:'Sony',city:'HB'}
            ];
        }
        app.controller('SimpleController', SimpleController);
    </script>

</head>
<body>
    <div class="container-fluid" ng-controller="simpleController" ng-app="app">
        Name: <input type="text" ng-model="name"/>
        <ul>
            <li ng-repeat="coders in customers | filter:name | orderBy:'name'">{{coders.name}}-{{coders.city}}</li>
        </ul>
    </div>
</body>   

本文标签: