AngularJS Arrays – tips, tricks and examples

AngularJS Arrays – tips, tricks and examples

Today, We want to share with you AngularJS Arrays – tips, tricks and examples.In this post we will show you 8 AngularJS Tricks You Won’t Find in Most Tutorials, hear for AngularJS tips & tricks – Step by Step Tutorial for Beginners we will give you demo and example for implement.In this post, we will learn about AngularJS Tutorial – Essential Tips and Tricks for Beginners with an example.

AngularJS Arrays – tips, tricks and examples

There are the Following The simple About AngularJS Arrays – tips, tricks and examples Full Information With Example and source code.

As I will cover this Post with live Working example to develop AngularJS array functions, so the AngularJS array of objects,
AngularJS multidimensional array for this example is following below.

Array Expressions in AngularJS with Example

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Array Expressions of AngularJs - www.pakainfo.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
	var app = angular.module('root', [])
	app.controller("productCotroller", function ($scope) {
	$scope.name = "Pakainfo Product";
	$scope.product_reviews = [70, 75, 80, 95];
});
</script>
</head>
<body ng-app="root">
	<form id="form1">
		<div ng-controller="productCotroller">
		<div>Array Expression</div>
		Below is Marks obtained by <b>{{name}}</b> in different Products are</br>
		<p>In Mobile he obtained <b>{{product_reviews[0]}}</b> product_reviews</p>
		<p>In Laptop he obtained <b>{{product_reviews[1]}}</b> product_reviews</p>
		<p>In Car he obtained <b>{{product_reviews[2]}}</b> product_reviews</p>
		<p>In Bike he obtained <b>{{product_reviews[3]}}</b> product_reviews</p>
		</div>
	</form>
</body>
</html>

Array of objects in AngularJs Example

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Creating Object in AngularJs Example</title>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("pakainfoApp", []);
        app.controller("productCotroller", function($scope) {
            $scope.product = {
                    pId:1001,
                    pName:"Mobile Lenova",
                    pAddress:"Good Qty",
                    product_price:[65,85,68,75,72,97]
                    
            }
        })
    </script>
    </head>
    <body ng-app="pakainfoApp">
        <h1>Product Price List</h1>
        <table ng-controller="productCotroller">
            <tr>
                <td>ProductId</td>
                <td>ProductName</td>
                <td>ProductAddress</td>
                <td>ProductMarks</td>
            </tr>
            <tr>
                <td>{{product.pId}}</td>
                <td>{{product.pName}}</td>
                <td>{{product.pAddress}}</td>
                <td><ul></ul><li ng-repeat="price in product.product_price">{{price}}</li></ul></td>
            </tr>
        </table>
    </body>
    </html>

AngularJs Orderby Filter Example

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Angular Filter Example</title>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("pakainfoApp", []);
        app.controller("productCotroller", function($scope) {
            $scope.products = ["Mobile","car","Bike","Iphone","DVD"]
        })
    </script>
    </head>
    <body ng-app="pakainfoApp">
        <h1>AngularJs Orderby Filter Example</h1>
        <table ng-controller="productCotroller" border="2">
            <tr ng-repeat="product in products | orderBy:product:false">
                <td>{{product}}</td>
            </tr>
        </table>
    </body>
    </html>

Angularjs Custom Filter Example

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>AngularJs Custom Filter Example</title>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var pakainfoApp = angular.module("pakainfoApp",[]);
        
        pakainfoApp.controller("productController",function($scope){
            $scope.productName="Mobile";
            $scope.products_list = ["Mobile","Bike","TV","LCS","DVD","Laptop","Car"];
        })
        // creating custome filter to reverse of the string
        
        pakainfoApp.filter("reverse",function(){
            var fn_test = function(input){
                var ar = input.split('');
                ar.reverse();
                var results = ar.join('');
                return results;
            }
            return fn_test;
        });
        
        pakainfoApp.filter("startsWith",function(){
            var starts = function(input,option){
                var results=[];
                for(var i=0;i<input.length;i++){
                    if(input[i].charAt(0) == option){
                        results.push(input[i]);
                    }
                }
                return results;
            }
            return starts;
        })
        
        
        </script>
    </head>
    <body ng-app="pakainfoApp">
        <h1>AngularJs Custom Filter Example</h1>
        <div ng-controller="productController">
            User Name : {{productName | reverse}} <br>
            <br> <span> Filter Courses</span>
            <ol>
                <li ng-repeat="product in products_list | startsWith:'J'">{{product}}</li>
            </ol>
        </div>
    </body>
    </html>

Using Array in AngularJs Example

index.html

    <html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJs Controller with Array Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("pakainfoApp", []);
            app.controller("productCotroller", function($scope) {
                $scope.product_price = [95, 52, 65, 98, 55, 35];
            })
        </script>
    </head>
    <body ng-app="pakainfoApp">
        <h1>product Price List</h1>
        <div ng-controller="productCotroller">
            <ul>
                <li ng-repeat="product in product_price"> Products {{$index+1}} : {{product}} </li>
            </ul>
        </div>
    </body>
    </html>

AngularJs Search Filter Example

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Angular Filter Example</title>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("pakainfoApp", []);
        app.controller("productCotroller", function($scope) {
            $scope.products = [ {
                productId:1001,
                product_name : "Mobile",
                product_price : "3005",
            }, {
                productId:1002,
                product_name : "Table",
                product_price : "3006",
            }, {
                productId:1003,
                product_name : "Bike",
                product_price : "3005",
            } , {
                productId:1004,
                product_name : "Car",
                product_price : "3001",
            } , {
                productId:1005,
                product_name : "Laptop",
                product_price : "3001",
            } , {
                productId:1006,
                product_name : "CD",
                product_price : "3005",
            } , {
                productId:1007,
                product_name : "DVD",
                product_price : "3008",
            }, {
                productId:1008,
                product_name : "Mouse",
                product_price : "3007",
            }, {
                productId:1009,
                product_name : "House",
                product_price : "3007",
            }, {
                productId:1010,
                product_name : "Bag",
                product_price : "3001",
            }]
        })
    </script>
    </head>
    <body ng-app="pakainfoApp">
        <h1>AngularJs Searching using Filters - www.pakainfo.com</h1>
        <br><br>
        Enter Product Name To Search :
        <input type="text" ng-model="searchByName"/>
        <br><br>
        Select Departmet to Search :
        <select ng-model="searchByDept">
            <option value="">All</option>
            <option>98981</option>
            <option>98985</option>
            <option>98986</option>
            <option>98987</option>
            <option>98988</option>
        </select>
        <br><br>
        <table ng-controller="productCotroller" border="2">
            <tr style="background-color:green">
                <td>product Id</td>
                <td>product Name</td>
                <td>Department Id</td>
            </tr>
            <tr ng-repeat="product in products | filter:{'productName':searchByName,'product_price':searchByDept}">
                <td>{{product.productId }}</td>
                <td>{{product.productName }}</td>
                <td>{{product.product_price }}</td>
            </tr>
        </table>
    </body>
    </html>

AngularJs Data Binding Example

index.html

    <!DOCTYPE html>
    <html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <body>
            <div ng-app="pakainfoApp" ng-controller="productController">
                <p>Product name: <b>{{product_name}}</b>
                </p> 
            </div> 
            <script>
                var app = angular.module('pakainfoApp', []);
                app.controller('productController', function ($scope) {
                    $scope.product_name = "Mobile";
                });
            </script> 
            <p>Here the binding happening from angularjs controller.</p> 
        </body> 
    </html>

Data Binding with ng-model :

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
        <div ng-app="">
            <p></p>
            <p>Enter Your Product Name:
                <input type="text" ng-model="product_name">
            </p>
            <p>Hello : <b>{{ product_name}}</b> Fresh Items ?</p>
        </div>
    </body>
    </html>

Angular http (AJAX) Example Tutorials

index.html

    <!DOCTYPE html>
    <html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <style>
            li{
                height: 30px;
                width: 200px;
                padding: 5px;
                border:1px solid green;
            }
        </style>
        <body>
            <div ng-app="pakainfoApp" ng-controller="productListController"> 
                <h3>AngularJs AJAX With JSON Calls - www.pakainfo.com</h3>
                <ul>
                    <li ng-repeat="x in products">
                        {{x}}
                    </li>
                </ul>
            </div>
            <script>
                var app = angular.module('pakainfoApp', []);
                app.controller('productListController', function ($scope, $http) {
                    $http({
                        url: "products.php",
                        method: "GET"
                    }).then(function Succes(response) {
                        $scope.products = response.data;
                    }, function Error(response) {
                        alert(response.data);
                    });
                });
            </script>
        </body>
    </html>

Resource file : products.php

    <?php
    $productsData = array();
    array_push($productsData, "Java");
    array_push($productsData, "C");
    array_push($productsData, "C++");
    array_push($productsData, "Spring");
    array_push($productsData, "Hibernate");
    array_push($productsData, "AngularJS");
    array_push($productsData, "JQuery");
    echo json_encode($productsData);
    ?>

Web Programming Tutorials Example with Demo

Read :

  How to Open URL in New Tab using Magento

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AngularJS Arrays – tips, tricks and examples.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of