Ng-Change-8

 

In this example of Ng-Change, we have a dropdown with two values circle and rectangle, so on change of drop down selection the span will get changed from circle to rectangle. Html code:  $scope.changeShape = function () { $scope.listShape == "Circle" ? $scope.circle = true : $scope.circle = false; }; See the output:

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div class="container"> <div class="row well" ng-controller="myController"> <div class="col-md-12"> <div class="row"> <div class="col-md-6" ng-init="listShape='Circle'"> <select class="form-control" ng-model="listShape" ng-change="changeShape()"> <option value="Circle">Circle</option> <option value="Square">Square</option> </select> </div> </div> <br /> <div class="row"> <div class="col-md-12"> <div ng-repeat="spec in specifications"> <span ng-show="circle"><i class="fa fa-circle"></i></span><span ng-hide="circle"><i class="fa fa-square"></i></span>&nbsp;&nbsp;<span><b>{{spec}}</b></span> </div> </div> </div> </div> </div> </div> <script> var app = angular.module("app", []); app.controller('myController', ['$scope', function ($scope) { $scope.circle = true; $scope.changeShape = function () { $scope.listShape == "Circle" ? $scope.circle = true : $scope.circle = false; }; $scope.specifications = ["Ram : 4GB", "HD : 500GB", "Processor : i3", "Graphics Card : ATI (1 GB)"]; }]); </script> </body> </html>
Output