Drop down with options from JSON formatted values with filter function

The options are taken from a set of JSON formatted strings, but while adding as options one filter is applied by using a function. This function checks the marks and if mark is >= 70 then only they are displayed as options for the selection. Similarly we check only class=Three as filter condition and show the options for selection.

Watch the check_class function

Selected Student = {{students}} , Selected Mark = {{students.mark}}
<div ng-app="my_app" ng-controller="my_ctrl">
<select  ng-model="students" ng-options=" x.name for x in details | filter :check_class"  >
<span>Selected Student = {{students}}</span> , 
<span>Selected Mark = {{students.mark}}</span>

var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope) {
 $scope.details=[{"id":"1","name":"John Deo","class":"Four","mark":"75"},
{"id":"2","name":"Max Ruin","class":"Three","mark":"85"},
{"id":"4","name":"Krish Star","class":"Four","mark":"60"},
{"id":"5","name":"John Mike","class":"Four","mark":"70"}]

$scope.check_class = function(details){
	return (details.mark >=70);
	//return (details.class == $scope.my_class); 
We have two students of class = Three, so only two options are available for selection as we have applied filter to restrict the options. ( this line is commented in above code )
Similarly another filter is to display students who's mark is equal to or more than 70. Under this filter three students are qualified and displayed as option.

Interlinked drop down list box

We will create one category and subcategory ( inter linked ) drop down list boxes by using filters and MySQL database as source of options.
Two dependant drop down list using data from MySQL tables
DEMO: Options taken from JSON string

Drop down List Box
DEMO: Options from MySQL database DEMO: Options onChange Event DEMO: onChange Event to post selected option to back end script

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2023 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer