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

＆＃13;

 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);
  }
});

＆＃13;

<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>

＆＃13;

多选择下拉有角度而不是填充

1 个答案: