Question

我有一个选择框，其中几个值基于我需要显示文本框标签的选择。

例如：如果你选择了


SE表示我需要显示Location2和Reporting To标签框。

如果您选择MANAger，则表示只需要显示Location2标签文本

仅限

框。如果您选择ADM /集群，那么任何一个都需要仅显示位置。

Js档案

 $scope.ChangeRole = function(id){
    roleid=$scope.Role;
    if(id=="2"){
        // alert(id);
        $scope.showreport =true;
        $scope.showreportlocation=true;
        $scope.showlocation = false;

    }else if(id=="3"){
        $scope.showreportlocation = true;
        $scope.showreport = false;
        $scope.showlocation = false;
    }else{
        $scope.showreport = false;
        $scope.showreportlocation = false;
        $scope.showlocation = true;
    }
}

HTML文件

 <div class="col-lg-6">
    <div class="form-group">
         <label>Role<span style="color:red">*</span></label>
          <div class="input-group role">
             <select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
                 <option  value="0">Role</option>
                 <option value="1">ADM</option>
                 <option value="2">SE</option>
                 <option value="3">MANA</option>
                 <option value="4">ClUSTER</option>
            </select>
          <div class="input-group-addon">
        </div>
      </div>
   </div>
</div>

<div class="col-lg-6">
   <div class="form-group" ng-show="showlocation">
       <label>Location<span style="color:red">*</span></label>
       <div class="input-group location">
         <select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
          <option id="OptionInput" value="">Location</option>
         </select>
       <div class="input-group-addon">
       </div>
     </div>
  </div>
 </div>

<div class="col-md-6" ng-show="showreportlocation">
    <div class="form-group">
    <label>Location2<span style="color:red">*</span></label>
    <div class="input-group site">
      <select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
        <option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
      </select>
      <div class="input-group-addon">
        <i class="fa  fa-map"></i>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
   <div class="form-group">
      <label>Reporting To<span style="color:red">*</span></label>
      <div class="input-group">
      <select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
         <option value="">Reporting To</option>
      </select>
      <div class="input-group-addon">
      </div>
    </div>
  </div>
</div>

在这里，我已经为所有人提供了所需的选项，但由于需要存在，因此不允许我保存。

使用ng-show进行特定选择我会隐藏该标签，但保存html时也会检查该字段，这是错误的，请告诉我该怎么办。

请一些小提琴让我知道，

Answer 1

改为使用ng-required，只有在显示时才需要它。

我还测试了Casey使用ng-if而不是ng-show的建议，这也是有效的。 https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview

如何在ng-show中使用？

1 个答案: