多角度選擇下拉不填充

Question

我有一個小角度控制器，控制一個下拉菜單，根據第一個選擇填充第二個下拉菜單。

我似乎無法得到從我的控制器的任何內容填充下拉，我沒有控制檯錯誤，並沒有看到錯誤，這將是很好的第二雙眼睛，看看他們是否可以發現我的錯誤。

我控制器

// our controller for the form 
// ============================================================================= 
.controller('formController', function($scope) { 

    // we will store all of our form data in this object 
    $scope.formData = {}; 

    // function to process the form 
    $scope.processForm = function() { 
     alert('awesome!'); 
    }; 

}); 


var app = angular.module('selection-type', []); 

app.controller('SelectCnrl', function($scope) { 

    $scope.user = {bankName: ''}; 

    $scope.banks = [{ 
    "name": "Bank A", 
    "branches": [{ 
     "name": "Branch 1", 
     "code": "1" 
    }, { 
     "name": "Branch 2", 
     "code": "2" 
    }] 
    }, { 
    "name": "Bank B", 
    "branches": [{ 
     "name": "Branch 3", 
     "code": "3" 
    }, { 
     "name": "Branch 4", 
     "code": "4" 
    }, { 
     "name": "Branch 5", 
     "code": "5" 
    }] 
    }]; 

}); 

我的HTML

<div ng-app="selection-type"> 

    <div ng-controller="SelectCnrl"> 
     <select ng-model="user.bankName" ng-options="bank.name for bank in banks"> 
     </select> 

     <select ng-model="user.branch" ng-if="user.bankName" 
       ng-options="branch.code as branch.name for branch in user.bankName.branches"> 
     </select> 

     <!--<br /> <br /><br /><br /><br />--> 
     <!--selected bank : {{ user.bankName }} <br />--> 
     <!--selected branch : {{ user.branch }}--> 
    </div> 

</div> 


<div class="form-group row"> 
    <div class="col-xs-6 col-xs-offset-3"> 
     <a ui-sref="form.end" class="btn btn-block btn-info"> 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
     </a> 
    </div> 
</div> 

Answer 1

改變您的代碼以$scope.user = {bankName: $scope.banks[0] ,branch:'1'};

在第一選擇的模型值就會從$scope.banks數組的對象所以用$scope.user.bankName初始化從$scope.banks陣列

angular.module('selection-type', []) 
 
.controller('formController', function($scope) { 
 

 
    // we will store all of our form data in this object 
 
    $scope.formData = {}; 
 

 
    // function to process the form 
 
    $scope.processForm = function() { 
 
     alert('awesome!'); 
 
    }; 
 

 
}) 
 
.controller('SelectCnrl', function($scope) { 
 
    $scope.banks = [{ 
 
    "name": "Bank A", 
 
    "branches": [{ 
 
     "name": "Branch 1", 
 
     "code": "1" 
 
    }, { 
 
     "name": "Branch 2", 
 
     "code": "2" 
 
    }] 
 
    }, { 
 
    "name": "Bank B", 
 
    "branches": [{ 
 
     "name": "Branch 3", 
 
     "code": "3" 
 
    }, { 
 
     "name": "Branch 4", 
 
     "code": "4" 
 
    }, { 
 
     "name": "Branch 5", 
 
     "code": "5" 
 
    }] 
 
    }]; 
 
    
 
    $scope.user = {bankName: $scope.banks[0] ,branch:'1'}; 
 

 
    $scope.displayModalValue = function(){ 
 
    console.log($scope.user.bankName); 
 
    } 
 
});

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

 
    <div ng-controller="SelectCnrl"> 
 
     <select ng-model="user.bankName" ng-options=" bank.name for bank in banks" ng-change="displayModalValue()"> 
 
     </select> 
 

 
     <select ng-model="user.branch" ng-if="user.bankName" 
 
       ng-options="branch.code as branch.name for branch in user.bankName.branches"> 
 
     </select> 
 

 
     <!--<br /> <br /><br /><br /><br />--> 
 
     <!--selected bank : {{ user.bankName }} <br />--> 
 
     <!--selected branch : {{ user.branch }}--> 
 
    </div> 
 

 
</div> 
 

 

 
<div class="form-group row"> 
 
    <div class="col-xs-6 col-xs-offset-3"> 
 
     <a ui-sref="form.end" class="btn btn-block btn-info"> 
 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
 
     </a> 
 
    </div> 
 
</div>