Angular JS 显示和隐藏未按预期工作答案

【问题标题】：Angular JS Show and Hide Not Working As ExpectedAngular JS 显示和隐藏未按预期工作
【发布时间】：2015-09-03 12:47:27
【问题描述】：

I want a select (division) that when "Information Technology" is selected, displays 3 radio buttons (IT Role).当单击前 2 个中的任何一个时，我希望出现 4 个单选按钮（请求类型），当单击最后一个单选按钮时，我想要另一个下拉选择（功能）。

这是plunkr。

选择“信息技术”时，只有在选择资源时才能显示的功能下拉函数也会显示出来，并且在取消选择“信息技术”时不会消失。

当我单击单选按钮时，它们仍然处于选中状态——而不是单选按钮应该做什么。

这是模板：

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

  <head>
    <link data-require="bootstrap-css@3.1.1" 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="angular.js@1.2.16" 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>

【问题讨论】：

标签： angularjs

【解决方案1】：

您在错误的用户角色复选框上获得了 ngModel 指令。你应该全部绑定到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>

我还在下面函数部分的 ngHide 指令中添加了一个空检查。在选择资源之前不会显示：

<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">

这是工作的 plunker：http://plnkr.co/edit/ISPCjdcquKyBQUkIVp3q?p=preview

【讨论】：