Ng-Options-7

 

In this example firstly we can add the color by calling addColor() option.ng-options create options of added colors.Div element will show if we select the added the color.

 
 
 
<!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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="Example"> <div ng-controller="ExampleController"> <div class="container"> <b>Add Color</b> <input type="color" ng-model="colorName" class="form-control" /><br /> <input type="button" ng-disabled="colorName==null || colorName==''" ng-click="addColor(colorName)" class="btn btn-primary" value="Add Color" /><br /><br /> <span ng-show="ColorArrs.length>0"><b>Choose Color</b><select ng-model="selectedColor" class="form-control" ng-options="ColorArr for ColorArr in ColorArrs"></select><br /></span> <div style="width:200px;height:200px;background-color:{{selectedColor}}"></div> </div> </div> <script> var app = angular.module("Example", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.ColorArrs = []; $scope.addColor = function (colorName) { $scope.ColorArrs.push(colorName); $scope.colorName = null; } }]); </script> </body> </html>
Output