LearnKode

8 Example(s) of Ng-Init


Description :

Ng-init is used to initialization. In this example of ng-init, test variable is bound with textbox and it is initialized with value "LearnKode" using ng-init directive as ng-init="test='LearnKode'". So wherever the variable is being used, will be set to "LearnKode" . See the code snippet:


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div ng-init="test='LearnKode'">
            My WebSite <input type="text" ng-model="test" />
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, ng-init will initialize array of objects and we will be using the array in ng-repeat. ng-init code: ng-init="Arrs=[{name:'Tulip'},{name:'Sunflower'},{name:'Merrygold'}]" "arr.name" access the name of objects and display as it.


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div ng-init="Arrs=[{name:'Tulip'},{name:'Sunflower'},{name:'Merrygold'}]">
            <div ng-repeat="arr in Arrs">{{arr.name}}</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, ng-init will initialize array of objects named Arrs and the field of array arr.name is bind with ng-options in drop-down list which generate list of options in drop-down as name of flowers. ng-init code: ng-init="Arrs=[{name:'Tulip'},{name:'Sunflower'},{name:'Merrygold'}];name='Tulip'" See code snippet:


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div ng-init="Arrs=[{name:'Tulip'},{name:'Sunflower'},{name:'Merrygold'}];name='Tulip'">
            Flowers <select ng-model="name" ng-options="arr.name as arr.name for arr in Arrs"></select>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, We are setting a variable value as true and assigning the same variable as ng-model of checkbox "isCheck" is a angular variable with ng-model of checkbox. So by default the checkbox will be selected


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div class="container" ng-init="isCheck=true">
            Are you 18+ <input type="checkbox" ng-model="isCheck" />
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, ng-init directive initialize the value of quantity and price variable which are bind to quantity and price textbox respectively like: ng-init="quantity=10;price=2000" Below textboxes total is shown in bold element by multiplying quantity and price like {{quantity*price}}.


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div class="container" ng-init="quantity=10;price=2000">
            Quantity: <input type="number" ng-model="quantity"><br />
            Costs:    <input type="number" ng-model="price"><br />
            Total= <b>{{quantity*price}}</b>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, We will show or hide the text based on the value of variable radioOption assigned to ng-show directive, this variable is being set in ng-init like ng-init="radioOption='true'" and after the user change the radio selection the text will be show/hide.


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <div ng-init="radioOption='true'">
            <input type="radio" name="radioOption" ng-model="radioOption" value='true'>Show
            <input type="radio" name="radioOption" ng-model="radioOption" value='false'>Hide <br />
            <div ng-show="radioOption=='true'" style="padding:10px; border:1px solid black; width:30%; font-weight:bold">Hi Welcome to LearnIt... Hello World</div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In ng-init directive, we call the getCurrentYear() function which will return the year from current date as: $scope.getCurrentYear = function () { return (new Date).getFullYear(); } and assign to year variable and shown in code. Year will increase/decrease by 1 when we click on Next Year link/Previous Year link resp.


Ng-Init 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>
</head>
<body ng-app="initExample">
    <div ng-controller="ExampleController">
        <div ng-init="year=getCurrentYear()">
            <a href="" ng-click="year = year-1">Previous Year </a> | <a href="" ng-click="year = year+1">Next Year</a>
            <div>Year: <b>{{ year }}</b></div>
        </div>
    </div>
    <script>
    var app = angular.module("initExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.getCurrentYear = function () {
            return (new Date).getFullYear();
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, We will initialize some fields of form with ng-init directive and initialized values are bind with ng-model of different controls, Here is the code for ng-init: ng-init="Cricket=true;Football=true;lastName='Last Name';firstName='First Name';gender='Male'" See the example


Ng-Init 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>
</head>
<body ng-app>
    <div>
        <form ng-init="Cricket=true;Football=true;lastName='Last Name';firstName='First Name';gender='Male'">
            First Name <input type="text" ng-model="firstName" /><br /><br />
            Last Name <input type="text" ng-model="lastName" /><br /><br />
            Gender:<input type="radio" ng-model="gender" name="gender" value="Male" />Male
            <input type="radio" ng-model="gender" name="gender" value="Female" />Female<br /><br />
            Hobbies<br />
            <input type="checkbox" ng-model="Cricket" />Cricket
            <input type="checkbox" ng-model="Football" />Football
            <input type="checkbox" ng-model="Tennis" />Tennis
            <input type="checkbox" ng-model="Badminton" />Badminton<br /><br />
            <input type="button" value="Save" />
            <input type="button" value="Cancel" />
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output