Question

我想要一个选择（分裂），当＆＃34;信息技术＆＃34;选中，显示3个单选按钮（IT角色）。当单击前两个中的任何一个时，我想要出现4个单选按钮（请求类型），当单击最后一个单选按钮时，我想要另一个下拉选择（功能）。

这是plunkr。

何时＆＃34;信息技术＆＃34;选择后，只显示IF资源被选中的功能下拉列表也会显示，如果＆＃34;信息技术＆＃34;取消选择。

同样，当我点击单选按钮时，它们仍保持选中状态 - 而不是单选按钮应该做什么。

以下是模板：

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

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

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

Angular JS显示和隐藏不按预期工作

1 个答案: