AngularJS Quiz App Tutorial (5/24) - Ng Model and Angular Filters

The writeup for this video:

Part 1 of this series:

The Git Repo for this project:

This video is dedicated to implementing the live updating search functionality within out list of turtles. This is achieved in a very simple way using filters in Angular and a new directive called ng-model.

ng-model will bind a property on our controller to the input text for the search in the html. This binding is what is known as a two way data binding. It is called that because the input text will change if we programmatically change the bound property on our controller but the controller property will also automatically change when the user types in the input box.

Now that we have the property on our controller that is bound to the input text, we can then use angular filters to filter the turtles that are being displayed by the ng-repeat.

Support Me On Patreon

One Off Donations:

Bitcoin: 39iDX27ZSkYtRhUrH5r5YN128wEjwDmSYp
Ethereum: 0x38b3cBF8Ee3EeeeA33D1925bA0ce0e90c8EcFD46
Horizen (ZEN): znanBCHpWJecBwZZmft9r5QzbzRX4nQn6Dz

Check Out The Site!

SUBSCRIBE!

Join the Community!

[ManuJimenez]

Dude, i love your tutoriales. Do you planed to make more tutorials or you have more tutorials about AngularJS?

Sorry for my english.

[webprogramming]

thank you very much....very clean and understandable lessons

[bcools]

Hi Adrain...

Your solution for my question in just previous video...helped me a lot..and i have posted my code also..
i have another question..hope i can ask.. :-)..

Basing on your tutorials ..I am working a simple website where there will be few Categories listed on left and all products will be displayed on right(some this like any shopping cart website ), if i click on Categories particular products should filtered and displayed,
i am getting these Categories data from one table and products from another table..theses two tables are linked based on id
where Catogeries have id's, and products are linked with cid..(id of catogereis..) its MySQL database,

converted table data to json format using php.

This below code to get Prodcuts Data..kept this code in one file with .php extension
// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}
if($categoryId != null) {
$sql = "SELECT p.*, pi.pimage FROM products AS p JOIN product_images AS pi ON pi.pid=p.id WHERE ptype='$productType' AND cid=$categoryId ORDER BY id DESC"; //WHERE ptype='$productType'
} else {
$sql = "SELECT p.*, pi.pimage FROM products AS p JOIN product_images AS pi ON pi.pid=p.id WHERE ptype='$productType' ORDER BY id DESC"; //WHERE ptype='$productType'

}
$qry = $conn->query($sql);

$data = array();

if($qry->num_rows > 0){

while( $row = $qry->fetch_object()){
$data[] = $row;
}
}
else
{
$data[] = null;
}
$conn->close();


echo json_encode($data);

?>


This below code to get Category Data..kept this code in another file with .php extension
// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT * FROM categories ORDER BY id ASC"; //WHERE ptype='$productType'

$qry = $conn->query($sql);

$data = array();

if($qry->num_rows > 0){

while( $row = $qry->fetch_object()){
$data[] = $row;
}
}
else
{
$data[] = null;
}
$conn->close();


echo json_encode($data);

?>


//Below is my controller code - where i am retiring data from php files...


angular.module('controller', [])

.controller("routeController", ['$scope', '$http', '$log', function($scope, $http, $log) {

$scope.title = "Products";
$scope.value = "";
$scope.currentCategory = this;

$http.post('./app/getData.php', { ptype: 'smb', categoryId: null }) //
.then(function(data) {
$scope.products = data.data;
console.log($scope.products);
}),
(function(err) {
$log.error = (err);
})

//
.then(function(data) {
$scope.categories = data.data;

}),
(function(err) {
$log.error = (err);
})


$scope.productDetailsView = this;

$scope.productDetails = function(index) {

$scope.productDetailsView = index;
}




}]);


Apart from this i have used ng-repeat to display both Categories and products..used ng-click on Categories and filter on products, not able to filter

This is all i have done..i dont know if i am missing any thing...any idea suggestion or any working link will help me a lot.

Will be waiting from your reply

Thanks

[ThePurvikpatel]

How filter just filtered the Type of turtle?

[GautamKumar-otve]

if i put 20 or more words in any field then code is broken data is over flow. how to fix it can any one help me.

[bikashbhandari]

sir i want to ask simple question. we define ng-model='list.earch' to get the value. but here why we need to defined vm.search="" in controller?? is that necessary?

[ThePurvikpatel]

How filter just filtered the Type of turtle?