CODEWITHSUNDEEP
angularjs
FarazShuja
FarazShuja

Reputation: 2370

show/hide content based on select value

I want to show/hide a content based on a sepecific value selected in dropdown but its not working.

$scope.list = {
    'val1': 'abc',
    'val2': 'xyz'
};
$scope.selectedVal = 'val1'
$scope.isEnabled = $scope.selectedVal == 'val1' ? true : false;

html code

<select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select>
<div ng-if="isEnabled">
    <span>Show Me</span>
</div>

On change of selectbox Show Me is not shown/hidden, whats wrong?

Upvotes: 1

Views: 5523

Answers (1)

sylwester
sylwester

Reputation: 16498

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {
  $scope.list = {
    'val1': 'abc',
    'val2': 'xyz'
  };
  $scope.selectedVal = 'val1'

  $scope.$watch('selectedVal', function() {
    $scope.isEnabled = $scope.selectedVal == 'val1' ? true : false;
  });



});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">

    <select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select>


    <div ng-if="isEnabled">
      <span>Show Me</span>
    </div>

Upvotes: 3

Related Questions