angularjs without controller ng-click not firing

Question

I am practising angularjs. In below example, ng-click is not firing at all, not sure why. I actually not using any controller in my code, may be because of that, ng-click not firing?

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">

<div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

<h2>Customers</h2>

Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

    <br><br>
    <table border="2">
        <thead>
            <tr>
                <th ng-click="orderByProperty('name')">Name</th>
                <th ng-click="orderByProperty('city')">City</th>
                <th ng-click="orderByProperty('order')">Order</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
                <td>{{user.name | uppercase}}</td>
                <td>{{user.city}}</td>
                <td>{{user.order | currency}}</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

app.js

var myApp1 = angular.module('myApp1',[])

function orderByProperty(propertyName){
    // alert('dsfdf')
    return propertyName;
}

Please tell me what went wrong in above code? Is that mandatory to use controller in a code? If not used, ng-click do not work at all?

UPDATE When I replaced ng-click with 'onclick', even is getting fired, but sorting functionality is not working.

UPDATE2: BELOW IS THE UPDATED CODE

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">


<div ng-controller="MyController">

    <div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

    <h2>Customers</h2>

    Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

        <br><br>
        <table border="2">
            <thead>
                <tr>
                    <th ng-click="orderByProperty('name')">Name</th>
                    <th ng-click="orderByProperty('city')">City</th>
                    <th ng-click="orderByProperty('order')">Order</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
                    <td>{{user.name | uppercase}}</td>
                    <td>{{user.city}}</td>
                    <td>{{user.order | currency}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

</body>
</html>

app.js

var myApp1 = angular.module('myApp1',[])

myApp1.controller('MyController', ['$scope', function($scope){

    $scope. orderByProperty = function(propertyName){
        // alert('dsfdf')
        return propertyName;
    }   

}])

Above I used controller, now evenT gets firing but sorting not working as expected..

Bind the orderByProperty function with the $scope then only you can access methods defined in javascript from your HTML. $scope acts as a glue between view and controller. So, anything that you want to access from view , bind it to $scope or $rootScope. — Prateek Gupta
– Prateek Gupta, Commented May 2, 2017 at 6:54

Sajeetharan · Accepted Answer · 2017-05-02 06:46:38Z

2

Yes you need to have the ng-controller placed in order to get ng-click work.

When a controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new controller object, using the specified controller's constructor function. A new child scope will be available as an injectable parameter to the controller's constructor function as $scope.

3 Comments

John Over a year ago

But in above example, i really do not need any controller since its just only one page, right? So, is that not possible to make ng-click work without ng-controller? And I also heard ng-click will have its own scope..

John Over a year ago

I just updated in my original post, please look into it.

Sajeetharan Over a year ago

@John onclick will work because its the javascript way.

Ferus7 · Accepted Answer · 2017-05-02 06:39:10Z

0

As @Sajeetharan said, in angularjs all functions you call need to be declared in controllers, that is how it works

answered May 2, 2017 at 6:39

Ferus7

7371 gold badge11 silver badges23 bronze badges

1 Comment

John Over a year ago

I just updated in my original post, please look into it.

ramana · Accepted Answer · 2017-05-02 06:44:10Z

0

before using ng-click u must place ng-controller in your HTML.

<body ng-app="myApp1" ng-controller="myAppCtrl">

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

myApp1.controller('myAppCtrl',['$scope',function ($scope) {

$scope.orderByProperty=function(propertyName){
    // alert('dsfdf')
    return propertyName;
}
}]);

answered May 2, 2017 at 6:44

ramana

485 bronze badges

1 Comment

John Over a year ago

I just updated in my original post, please look into it.

Eric · Accepted Answer · 2018-01-21 16:49:47Z

To make it work, 2 places need to change: Binding orderBy with a ng-model value.

var myApp1 = angular.module('myApp1',[])

myApp1.controller('MyController', ['$scope', function($scope){

    $scope. orderByProperty = function(propertyName){
        $scope.myorder = propertyName;
    }   

}])

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">


<div ng-controller="MyController">

    <div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

    <h2>Customers</h2>

    Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

        <br><br>
        <table border="2">
            <thead>
                <tr>
                    <th ng-click="orderByProperty('name')">Name</th>
                    <th ng-click="orderByProperty('city')">City</th>
                    <th ng-click="orderByProperty('order')">Order</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter : searchText | orderBy : myorder : true">
                    <td>{{user.name | uppercase}}</td>
                    <td>{{user.city}}</td>
                    <td>{{user.order | currency}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

</body>
</html>

Collectives™ on Stack Overflow

angularjs without controller ng-click not firing

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related