Ng-If-8

 

List of options created using array of object Arrs.On the basis of selected value the div element will show where condition will match.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app> <div ng-init="Arrs = [{ name: 'Car' }, { name: 'Fruit' }];Carcolors=[{color:'Red'},{color:'Green'}];Fruitcolors=[{color:'Red'},{color:'Yellow'}];Interiors=[{type:'Black Cloth'},{type:'Leather'}]"> Choose Object: <select ng-model="name" ng-options="Arr.name as Arr.name for Arr in Arrs"></select> <div ng-if="name=='Car'"> Color: <select ng-options="Carcolor.color as Carcolor.color for Carcolor in Carcolors" ng-model="carColor"></select><br /> Interior: <select ng-options="Interior.type as Interior.type for Interior in Interiors" ng-model="interiorType"></select><br /> Model Number: <input type="text" /><br /> </div> <div ng-if="name=='Fruit'"> Color: <select ng-options="Fruitcolor.color as Fruitcolor.color for Fruitcolor in Fruitcolors" ng-model="fruitColor"></select><br /> Description: <input type="text" /> </div> </div> </body> </html>
Output