Show or hide a pregnancy option, whenever the user selects in the registration that is female

Asked

Viewed 66 times

5

How do I make a patient registration page appear or hide an option to tell if the patient is pregnant or not. The option would only appear if the user checked the Female option.

The image below shows a preview of the registration page. The part marked in red is the part I want to appear only when the sex is female.

inserir a descrição da imagem aqui

javascript html angularjs

2 answers

7


Utilize ng-if or ng-show to control the display of content.

ng-if creates and destroys objects in the DOM.
ng-show only controls the object’s visibility, preserving it.

Example to follow:

function SampleController($scope) {
  $scope.sexo = 'M';
}
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  </head>
  <body>
    <div ng-controller="SampleController">

      Sexo:
      <select name="sexoSelect" ng-model="sexo">
        <option value="M">Masculino</option>
        <option value="F">Feminino</option>
      </select>

      <div ng-if='sexo == "F"'>
        Gravidez: 
        <select name="gravSelect" ng-model="gravidez">
          <option value="S">Sim</option>
          <option value="N">Não</option>
        </select>
      </div>

    </div>
  </body>
</html>

3

You can use the ng-show or ng-Hide option <div ng-show="myValue"></div>.

On the following page there is an example if you need: Angularjs Ngshow

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.