Question

我对Angular很新。我想根据选择框中的选择动态更改表单。

<form name="register" method="post" id="register" role="form" ng-submit="registerForm()">
<div class="form-group" ng-class="{ 'has-error' : erroractype }">    
        <select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required"> 
           <option value="" selected="selected" >I am</option>
          <option value="1"> Student</option>
          <option value="2"> Teacher</option>
          <option value="3"> School</option>
          </select>
<span class="help-block" ng-show="errorName" class="ng-cloak">{{ erroractype }}</span>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorFname }">

<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname">
<div class = "alert alert-danger" ng-show="errorFname" class="ng-cloak">{{errorFname}}</div>

</div>

<div class="form-group" ng-class="{ 'has-error' : errorLname }">
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname">
<div class = "alert alert-danger" ng-show="errorLname" class="ng-cloak">{{ errorLname }}</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }">
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1">
<div class = "alert alert-danger" ng-show="errorEmail1" class="ng-cloak">{{ errorEmail1 }}</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }">
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1">
<div class = "alert alert-danger" ng-show="errorPassword1" class="ng-cloak">{{ errorPassword1 }}</div>
{{ errorPassword1 }}
</div>

<div class="form-group" ng-class="{ 'has-error' : errormobile }">
    <input type="text" id="mobile" name="mobile" placeholder="Mobile Number (+1)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile">
    <div class = "alert alert-danger" ng-show="errormobile" class="ng-cloak">{{ errormobile }}</div>
 </div>

<div class="form-group">
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button>
</div>
</form>

正如您所看到的，可以根据选择框中的选择进行三种类型的注册。学生，老师和学校。

学生和教师表格看起来很好。他们会有名字和名字。姓。但是当人们选择学校时，名字的名字看起来很难看。应该只有单个文本框的学校。

所以，基本上我想要每当学校被选中时，姓氏文本框被隐藏，名字文本框成为学校名称。我怎样才能做到这一点？

Answer 1

好吧，我想出了类似的东西。当您选择One选项时，您会看到所需的更改。以下是工作示例的链接：http://codepen.io/ayushgp/pen/BWMjgG

HTML code：

<body ng-app="example">
  <div ng-controller="test">
    <select name="number" ng-model="type">
      <option value="0" selected>--Select an option--</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div>
      {{type == 1 ? 'Name of school' : 'First Name'}}:   <input type="text" />
    </div>
    <div ng-style="{'display':type==1?'none':'block'}">
      Last name: <input type="text" />
    </div>    
  </div>
</body>

Angular：根据选择动态更改表单

1 个答案: