LearnKode

8 Example(s) of Ng-Controller


Description :

Ng-controller is used to give the controller name to html block of code. So if you want to add method that will be called on some event like click etc then that will be defined and declared in controller. HTML:

Name:

{{firstName}}

And here is the JS snippet: var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.firstName = "LearnKode"; });


Ng-Controller Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div class="container">
        <br />
        <div ng-controller="myCtrl">
            Name: <input class="form-control" type="text" ng-model="firstName"><br>
            <br>
            <b>{{firstName}}</b> 
        </div>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.firstName = "LearnKode";
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Controller, We are taking two controller on two different html code blocks so the scope will be limited to their respective controllers. In the example we have controllers like: var app = angular.module('myApp', []); app.controller('myCtrl1', function ($scope) { $scope.firstName = "Learn"; }); app.controller('myCtrl2', function ($scope) { $scope.lastName = "kode"; }); And HTML part is like :

First Name:
Last Name:


Ng-Controller Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div class="container">
        <br />
        <div ng-controller="myCtrl1">
            First Name: <input class="form-control" type="text" ng-model="firstName"><br>
        </div>
        <div ng-controller="myCtrl2">
            Last Name: <input class="form-control" type="text" ng-model="lastName"><br>
        </div>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl1', function ($scope) {
        $scope.firstName = "Learn";
    });
    app.controller('myCtrl2', function ($scope) {
        $scope.lastName = "Kode";
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Controller, We have two scope properties in the controller for firstname and lastname as: $scope.fName = "David"; $scope.lName = "Doe"; And a function which will join the firstname and lastname and return the full name as: $scope.flName = function () { return $scope.fName + " " + $scope.lName; } And html side: First Name:

Last Name:

Full Name: {{flName()|lowercase}}


Ng-Controller Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="controller">
        <div class="container">
            <br />
            First Name: <input class="form-control" type="text" ng-model="fName"><br>
            Last Name: <input class="form-control" type="text" ng-model="lName"><br>
            Full Name: <b>{{flName()|lowercase}}</b>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('controller', function ($scope) {
        $scope.fName = "David";
        $scope.lName = "Doe";
        $scope.flName = function () {
            return $scope.fName + " " + $scope.lName;
        }
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Another example of Ng-Controller, We have created two methods in the controller and calling them on ng-click and that way the selection will be displayed in P tag. See the example


Ng-Controller Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="controller">
        <div class="container">
            <br />
            <button class="btn btn-default" ng-click="chiliSpicy()">Chili</button>
            <button class="btn btn-primary" ng-click="notChiliSpicy()">Not Chili</button><br />
            <p>The food is <b>{{spice}}</b> spicy!</p>
        </div>
    </div>
</body>
</html>
<script>
    var app = angular.module('app', []);
    app.controller('controller', function ($scope) {
        $scope.chiliSpicy = function () {
            return $scope.spice = "Chili";
        };
        $scope.notChiliSpicy = function () {
            return $scope.spice = "Not Chili";
        };
    });
</script>
Try it » Download Example »

Output

Description :

In this example of Ng-Controller, We have created a method in controller and added two buttons. Clicking on the first button will display name as "LearnKode" and if you enter the value in your name textbox then that will be displayed clicking on second button. See the example


Ng-Controller Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="controller">
        <div class="container">
            <br />Your Name:
            <input class="form-control" ng-model="cstmName"><br />
            <button class="btn btn-default" ng-click="customName('LearnKode')">LearnIt</button>
            <button class="btn btn-default" ng-click="customName(cstmName)">Custom name</button>
            <p>Your name is <b>{{name}}</b> !</p>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('controller', function ($scope) {
        $scope.customName = function (name) {
            return $scope.name = name;
        }
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Controller-6


Ng-Controller Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>
    div.grand div {
        padding: 10px;
        border: solid 2px tomato;
    }
</style>
</head>
<body ng-app="app">
    <div class="container"><br />
        <div class="grand">
            <div ng-controller="MainController">
                <p>{{call}}, {{name}} ! </p>

                <div ng-controller="ChildController">
                    <p>{{call}}, {{name}} !</p>

                    <div ng-controller="GrandChildController">
                        <p>{{call}}, {{name}} !</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('MainController', ['$scope', function ($scope) {
        $scope.call = 'Hello';
        $scope.name = 'Grand father';
    }]);
    app.controller('ChildController', ['$scope', function ($scope) {
        $scope.name = 'Father';
    }]);
    app.controller('GrandChildController', ['$scope', function ($scope) {
        $scope.call = 'Hi';
        $scope.name = 'Baby';
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Controller-7


Ng-Controller Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    body {
        color: white;
        background-color: black;
    }

    .controller {
        border: 1px solid maroon;
        padding: 15px;
        margin: 10px;
    }
</style>
</head>
<body ng-app="app">
    <div class="container">
        <br />
        <div ng-controller="pController" class="controller">
            <label>
                Parent Controller: <input class="form-control" type="text" ng-model="name" />
            </label>
            <div ng-controller="cController" class="controller">
                <label>
                    Child Controller: <input class="form-control" type="text" ng-model="name" />
                </label>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('pController', function ($scope) {
        $scope.name = "LearnIt";
    })
     .controller('cController', function ($scope) { });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Controller-8


Ng-Controller Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    .default {
        border: 1px solid green !important;
        background-color: white;
        color: green;
    }
</style>
</head>
<body ng-app="app">
    <div class="container">
        <div ng-controller="controller">
            <h3>Select Course</h3>
            <table>
                <thead>
                    <tr><td ng-repeat="p in btnNames"><a class="btn btn-success" style="float:left;margin:5px;" ng-class="{true:'default',false:''}[a]" ng-click="a=!a;selecterCourse(p)">{{p}}</a></td></tr>
                </thead>
            </table><br />
            <span ng-show="Arrs.length>0"><b>Selected Course : </b><span ng-repeat="p in Arrs">{{p}}<span ng-hide="$last">-</span></span></span>
        </div>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('controller', function ($scope) {
        $scope.btnNames = ["LearnIt", "AngularJs", "Bootstrap"];
        $scope.Arrs = [];
        $scope.selecterCourse = function (selectedCourse) {
            var idx = $scope.Arrs.indexOf(selectedCourse);
            if (idx > -1)
                $scope.Arrs.splice(idx, 1);
            else
                $scope.Arrs.push(selectedCourse);
        }
    })
</script>
</body>
</html>
Try it » Download Example »

Output