CODEWITHSUNDEEP
angularjs
jgravois
jgravois

Reputation: 2579

Angular JS Show and Hide Not Working As Expected

I want a select (division) that when "Information Technology" is selected, displays 3 radio buttons (IT Role). When either of the first 2 are clicked, I want 4 radio buttons to appear (Request Types) and when the last radio is clicked, I want another dropdown select (Function).

Here is a plunkr.

When "Information Technology" is selected, the function drop-down that should only show IF Resource is selected also shows and won't go away if "Information Technology" is deselected.

Also as I click the radio buttons, they remain selected -- not what radio buttons should do.

Here is the template:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="1.8.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script data-require="[email protected]" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="formController">

    <div class="frmElement">
        <label>Division: <span class="required">*</span></label>
        <select name="division" ng-model="selDivisions">
            <option value="">Select Division ...</option>
            <option value="1">Human Resources</option>
            <option value="2">Management</option>
            <option value="3">Information Technology</option>
            <option value="4">Accounting</option>
        </select>
    </div>

    <div class="frmElement" data-ng-show="selDivisions == '3'">
      <label>Please choose your role in the IT System: <span class="required">*</span></label>
       <input type="radio" ng-model="user_role.PM" value = "PM">&nbsp;&nbsp;
      <span class="chkbx_choice">Project Manager</span>
      <br />
      <input type="radio" ng-model="user_role.RC" value = "RC">&nbsp;&nbsp;
      <span class="chkbx_choice">Request Coordinator</span>
      <br />
      <input type="radio" ng-model="user_role.RS" value = "RS">&nbsp;&nbsp;
      <span class="chkbx_choice">Resource</span>
  </div>

  <div class="frmElement" data-ng-show="selDivisions == '3' && (user_role == 'PM' || user_role == 'RC')" data-ng-hide="!user_role || user_role == 'RS'">
    <label>Request Types: <span class="required">*</span></label>
    <input type="checkbox" name="cor_types" value="Email">&nbsp;&nbsp;
    <span class="chkbx_choice">Email Campaign</span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="cor_types" value="Report">&nbsp;&nbsp;
    <span class="chkbx_choice">Report</span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="cor_types" value="SAP">&nbsp;&nbsp;
    <span class="chkbx_choice">SAP</span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="cor_types" value="Web">&nbsp;&nbsp;
    <span class="chkbx_choice">Web</span>
  </div>

  <div class="frmElement" data-ng-show="selDivisions == '3' && user_role = 'RS'" data-ng-hide="selDivisions != '3' || user_role == '' || user_role == 'PM' || user_role == 'RC'">
    <label>Function: <span class="required">*</span></label>
    <select name="division" ng-model="selFunctions">
        <option value="">Select Function ...</option>
        <option value="AL">Analyst</option>
        <option value="DS">Designer</option>
        <option value="DV">Developer</option>
        <option value="TN">Technician</option>
    </select>
  </div>

  </body>

</html>

Upvotes: 1

Views: 401

Answers (1)

Ufuk Hacıoğulları
Ufuk Hacıoğulları

Reputation: 38508

You got the ngModel directive on the wrong checkboxes for user roles. You should bind all to user_role:

<div class="frmElement" data-ng-show="selDivisions == '3'">
  <label>Please choose your role in the IT System: <span class="required">*</span></label>
   <input type="radio" ng-model="user_role" value = "PM">&nbsp;&nbsp;
  <span class="chkbx_choice">Project Manager</span>
  <br />
  <input type="radio" ng-model="user_role" value = "RC">&nbsp;&nbsp;
  <span class="chkbx_choice">Request Coordinator</span>
  <br />
  <input type="radio" ng-model="user_role" value = "RS">&nbsp;&nbsp;
  <span class="chkbx_choice">Resource</span>
</div>

I also added a null check to ngHide directive on the functions section below. It won't show up before Resource is selected:

<div class="frmElement" data-ng-show="selDivisions == '3' && user_role = 'RS'" data-ng-hide="selDivisions != '3' || user_role == '' || user_role == 'PM' || user_role == 'RC' || !user_role">

Here's the working plunker: http://plnkr.co/edit/ISPCjdcquKyBQUkIVp3q?p=preview

Upvotes: 2

Related Questions