What are angular js directives ? How ng-src and ng-repeat directive works.

Angular js let you extends HTML with new attributes called directives, Angular js has many built in directive two of them are ng-src and ng-repeat.

So if we use binding expression with the image src attribute then result will be 404 error (Not Found).

Binding expression is like you declare a variable in javascript and show it to view or html UI.

Let’s understand it first if you don’t know what is data binding, if you know you can skip this part and go down to ng-src section.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            $scope.imageLink = “https://1.bp.blogspot.com/-3x8gQVnLtY4/YbRPTUj6MXI/AAAAAAAABOo/P50yQeRWa8cc5UAHnQIPlW0qp005jhaxQCNcBGAsYHQ/s150/frontbackgeek.png”;
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
       <img src=“{{imageLink}}”/>
    </div>
<body>
</body>
</html>

So in the above code we are declaring a variable imageLink and assign a image link to it. On body we are assigning this imageLink variable to src attribute of image tag.

To bind a varibale in html body we just need to show with curly braces like this {{imageLink}}.
This is called data binding. But in this case this data binding won’t work. ill explain it, first look into the output for above code.

Let’s understand reason behind this of not working data binding inside the src attribute of image tag.

As soon as DOM is parse the request is issued to load that image from the server, the binding expression of angular js is not evaluated. Hence 404 (Not Found) error occurs.

To fix this we use ng-src directive.

Table of Contents

What ng-src do

ng-src attribute ensure that a request is issued only after angular js has evaluated the binding expression.

So now if you use ng-src directive instead of src attribute, image will display.

 <div ng-app=“newModule” ng-controller=“newController”>
       <img ng-src=“{{imageLink}}”/>
    </div>

Now changing above src attribute to ng-src will show image on browser.

ng-repeat directive

if you have experience in programming then you must know about foreach loop. foreach loop helps to iterate objects or array values.

ng-repeat is simmilar to foreach loop.

Let’s understand with example.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            var user = [
            {
                name: “John”,
                surname: “Doe”,
                age: 28
            },
            {
                name: “John 2”,
                surname: “Doe 2”,
                age: 25
            },
            {
                name: “John 3”,
                surname: “Doe 3”,
                age: 22
            },
        ]
            $scope.userDetails = user;
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
        <div ng-repeat=“item in userDetails”>
            Name : {{item.name}} {{item.surname}} <br/>
            Age : {{item.age}}
            <hr>
        </div>
    </div>
<body>
</body>
</html>

So here we have a object with multiple user informations and we want to display all the information of users.

To iterate through the object and display all individual information of user we should use ng-repeat directive.

So in above code we are using ng-repeat and item in userDetails will loop through each item inside object and display each items value.

Output for the above code will be.

Nasted ng-repeat

What is nasted means, for coding purpose its stands for loop inside a loop.

So if you have a complax object like countries and cities data, and you have to display all cities of all countries with their country names. lets unders stand this with code.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            var countries = [
            {
            country:“India”,
            city : [
                {name: “Delhi”},
                {name: “Mumbai”},
                {name: “Haryana”},
            ]},
            {
            country:“USA”,
            city : [
                {name: “New York”},
                {name: “Los Angeles”},
                {name: “Chicago”},
            ]},
            {
            country:“UK”,
            city : [
                {name: “Bangor”},
                {name: “Bath”},
                {name: “Birmingham”},
            ]},
        ];
            $scope.countryDetails = countries;
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
        <div ng-repeat=“items in countryDetails”>
            State : {{items.name}}<br/>
            Cities : 
            <ul>
                <li ng-repeat=“city in items.city”>{{city.name}}</li>
            </ul>
            <hr>
        </div>
    </div>
<body>
</body>
</html>

So in the above code we have a complax object of countries list and there city object with multiple city name. now we are iterating through the countries object and with items iterator we have country name and city object and then we are iterating through items.city object and displaying all cities name respected to their countries.

Finding Index value of item in the collection

To find index of an item in the collection or object use $index property.

To get the index of the parent element use $parent.$index or use ng-init = “ParentIndex=$index”

So from the above example

Cities : 
            <ul>
                <li ng-repeat=“city in items.city”
                ng-init=“ParentIndex=$index”>{{city.name}}-{{ParentIndex}}</li>
            </ul>

ParentIndex is just a variable name you can use any name for this.

Now the output is

Once you practice through different examples you will be expert in this. thats all for this blog, i hope you like it, please share with your friends.