从属字段 angularjs - 展示

Question

我想创建依赖字段。请看下面的代码：

<div class="s-12 l-10"><select ng-model="requestType" required="required">
        <option value="" disabled selected style="display: none;">Request Type</option>
        <?php
        $result = DB::getInstance()->get('vwcustomfieldsoptions',array('id','=',16705));
        foreach($result->results() as $result)
        { ?>
            <option value="<?php echo $result->customvalue ?>"><?php echo $result->customvalue ?></option>
       <?php } 
       ?>
    </select>
</div><div class="s-12 l-10"><select ng-show="requestType =='Work Request' " ng-model="workRequestType" required="required">
        <option value="" disabled selected style="display: none;">Work Request Type</option>
        <?php
        $result = DB::getInstance()->get('vwcustomfieldsoptions',array('id','=',16706));
        foreach($result->results() as $result)
        { ?>
            <option value="<?php echo $result->customvalue ?>"><?php echo $result->customvalue ?></option>
       <?php } 
       ?>
    </select>
</div>
 </div><div class="s-12 l-10"><select ng-show="workRequestType =='Amendments to existing code'" ng-model="output" required="required">
        <option value="" disabled selected style="display: none;">Output</option>
        <?php
        $result = DB::getInstance()->get('vwcustomfieldsoptions',array('id','=',16711));
        foreach($result->results() as $result)
        { ?>
            <option value="<?php echo $result->customvalue ?>"><?php echo $result->customvalue ?></option>
       <?php } 
       ?>
    </select>
</div>

因此，当用户从 requestType 下拉列表中选择“需要工作”时，会出现 workRequestType 下拉列表。现在我想为以下领域做同样的事情。当用户从“对现有代码的修正”中选择“对现有代码的修正”时，应该会出现output下拉列表。由于某种原因，它不适用于该领域。我是 angularjs 的新手。

Answer 1

这可能会对您有所帮助并解决您的问题。请尝试以下代码段。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $scope.names1 = ["Blue", "Green", "Red"];
    $scope.names2 = ["Gold", "Silver", "Brownze"];
  
    $scope.callSelect1 = function(){
      $scope.select2 = $scope.select1;
    }
    
    $scope.callSelect2 = function(){
      $scope.select3 = $scope.select2;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="select1" ng-options="x for x in names" ng-change="callSelect1()">
</select>
  

<select ng-show="select1 == 'Linus'" ng-model="select2" ng-options="x for x in names1" change="callSelect2()">
</select>
  
<select ng-show="select2 == 'Green'"  ng-model="select3"  ng-options="x for x in names2">
</select>
 

</div>

从属字段 angularjs - 展示

Dependent Field angularjs - ng-show

angularjs

html

ng-show

ng-hide