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 :
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.