Question

我有一个选择选项，我从API获得标题列表，例如Mr，Mrs，Dr等，代码在前端看起来像这样：

<select class="form-control" name="titleSelect" id="titleSelect" ng-options="option.value for option in titleData.availableOptions track by option.key" ng-model="adult[$index].selectedTitle" ng-init="adult[$index].selectedTitle = titleData.availableOptions[0]"></select>

这在控制器中：

var getPassengerTitle = PassengerDetailsAndCardDetailsService.getPassengerTitle();

PassengerDetailsAndCardDetailsService是服务，我获取API数据，即标题数据。此外，此服务返回承诺。

这是我设置标题数据的地方：

    getPassengerTitle.then(function(result){                
        $scope.availableTitles = angular.fromJson(result.titleList);
        $scope.tempListOfTitles = [];

        for(var key in $scope.availableTitles){             
            $scope.tempListOfTitles.push({key : key, value : $scope.availableTitles[key]});
        };      

        $scope.titleData = {
                availableOptions: $scope.tempListOfTitles,
        };

    });

当我尝试将ng-init添加到第一个选项（即Mr.）时，它不起作用，因为显示了空白选项。但是，当我尝试在一个对象中静态定义titleData时，你可以帮助我吗？

更新：

我没有提到标题数据在ng-repeat内，以支持多人/乘客的输入。因此，我使用成人[$ index]为每个人/乘客创建一个ng模型。

Answer 1

我不确定这是否是您想要的所需行为，但如果您想在选择选项时初始化标题，则可以使用ng-model中的值或使用事件处理程序ng-change 。下面是一个示例jsbin，它处理更改并将新值分配给ng-model。如果这是您正在寻找的，请告诉我

Answer 2

尝试这样。

＆＃13;

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
 var vm = this;
  vm.adult = {
              'selectedTitle':'1'
            };
   vm.titleData = [
                   {'key':'0','value':'Mr'},
                   {'key':'1','value':'Ms'},
                   {'key':'2','value':'Dr'}
                  ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main as ctrl">
<div class="select-style">
  <select  ng-options="option.key as option.value for option in ctrl.titleData" ng-model="ctrl.adult.selectedTitle"></select>
</div>
   </div>
</div>

＆＃13;

ng-init不初始化我选择的模型

2 个答案: