Dependent Field angularjs - ng-show

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 выпадающий. Теперь я хотел бы сделать то же самое для следующего поля. Когда пользователь выбирает 'Поправки к существующему коду' from from 'Поправки к существующему коду' должно появиться выпадающее меню 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>