How to dynamically display content based on option selection in AngularJS using ng-show

Question

How to dynamically display content based on option selection in AngularJS using ng-show

I am trying to create a functionality where my input field is bound to my select option. When the select option is set to Yes, I want the input field to be visible, and when it's set to No, I want the input field to be hidden.

(function(){

  var app = angular.module('spa',[

    $rootScope.options = [
      {
        id: 0,
        name: 'No'
      }, 
      {
        id: 1,
        name: 'Yes'
      }
    ]

  ]);  

}());


 <form name="newData" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newData" novalidate> 
    <div class="form-group item item-input item-select">
      <div class="input-label">
        Booking Fee Paid
      </div>
      <select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name for option in options track by option.id" ng-init ="user.booking = options[0]" required>
      </select>
    </div>  

    <div class="row" ng-show="user.booking.name == 'Yes'">
        <div class="col">
        <div class="form-group item item-input">
                <input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="Amount">
            </div> 
        </div>
    </div>
  </form>

http://plnkr.co/edit/v0NrbTeigo3lm1njRu9A?p=preview

Any assistance would be greatly appreciated

javascript angularjs

Answer 1

Answer №1

If you're looking to learn more about AngularJS, I recommend checking out the beginner tutorials at angularjs.org.

For a practical example of what you're asking for, here is a sample code snippet:

angular.module('app', [])
    .controller('Sample', Sample);

function Sample() {
    this.options = [{
        id: 0,
        name: 'No'
    }, {
        id: 1,
        name: 'Yes'
    }];
    this.booking = this.options[0];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Sample as vm">
    
    <select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select>
    
    <pre>{{ vm.booking | json }}</pre>
    
    <input type="text" ng-show="vm.booking.name === 'Yes'"/>
</div>

Answer 2

If you're looking to learn more about AngularJS, I recommend checking out the beginner tutorials at angularjs.org.

For a practical example of what you're asking for, here is a sample code snippet:

angular.module('app', [])
    .controller('Sample', Sample);

function Sample() {
    this.options = [{
        id: 0,
        name: 'No'
    }, {
        id: 1,
        name: 'Yes'
    }];
    this.booking = this.options[0];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Sample as vm">
    
    <select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select>
    
    <pre>{{ vm.booking | json }}</pre>
    
    <input type="text" ng-show="vm.booking.name === 'Yes'"/>
</div>

Answer 3

Answer №2

The second parameter in the code specifies the required modules, not the implementation:

angular.module(name, [requires], [configFn]);

It seems like you encountered an injection error. Here is the corrected code:

http://example.com/sample-code

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

app.controller('MainController', function($scope) {
  $scope.items = [{
    id: 1,
    name: 'Apple'
  }, {
    id: 2,
    name: 'Banana'
  }];
});

Answer 4

The second parameter in the code specifies the required modules, not the implementation:

angular.module(name, [requires], [configFn]);

It seems like you encountered an injection error. Here is the corrected code:

http://example.com/sample-code

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

app.controller('MainController', function($scope) {
  $scope.items = [{
    id: 1,
    name: 'Apple'
  }, {
    id: 2,
    name: 'Banana'
  }];
});

How to dynamically display content based on option selection in AngularJS using ng-show

Answer №1

Answer №2

Similar questions

What is the best way to incorporate this data into the HTML document?

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

I'd like to know what sets next/router apart from next/navigation

When the function $(document).width() is called, it may yield varying results depending on the timing of the call

Changing a factory variable in AngularJS from a controller

What is the process for accessing a local .json file from a remote machine or folder?

Using PHP to trigger alerts with MySQL data via AJAX from a separate file

What steps does VSCode take to ensure that all necessary node dependencies are installed for its extensions?

Modifying table background color using AJAX and jQuery?

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

What is the method for accessing an anonymous function within a JavaScript Object?

What sets apart !$scope.variableName from $scope.variableName in AngularJS?

Float two DIVs horizontally with the same height using jQuery

Tips for customizing the AjaxComplete function for individual ajax calls

Utilizing cross-domain AJAX for JSON requests

What could be the issue with trying to bind an event handler in this manner?

Having trouble implementing the jQuery UI layout plugin in my Angular.js app with routing, specifically on the second view

Create a JavaScript program that can identify which number in a given array is different from the other two when two of the numbers in the array are equal

Learn how to easily toggle table column text visibility with a simple click

Modal's ng-click not triggering component's function