AngularJS:在数据库下拉列表中设置所选项目

Question

我有几个带有预定义字段的下拉列表。现在我正在对数据库进行 ajax 调用并获取数据。数据正确来自数据库，我可以在Firebug（网络选项卡）中看到数组。

我想将此数据设置为在下拉列表中选择。在文本框中，这很简单。但是我很难使用下拉菜单。

下面的 Ajax 代码

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_profile.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {
                        if (data.success) {
                      $scope.formData.dob = data.dob;
                      $scope.married = data.married;
}

网页代码

<input name="dob" id="dob" type="text" class="form-control textbox1" required="required" placeholder="Date of birth(dd-mm-yyyy) " ng-model="formData.dob">
<div class = "errorba" ng-show="dob">{{dob}}</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : errormarried }">    
        <select id="married" name="married" class="selector form-control" ng-model="formData.married" required="required"> 
          <option value="0" selected="selected" >Maritial Status</option>
          <option value="1" >Single</option>
          <option value="2">Married</option>
        </select>
<span class="errorba" ng-show="errormarried">{{ errormarried }}</span>
</div>

来自 ajax 的数据 - 11 表示单身。

请告知我做错了什么。

Answer 1

在

控制器中将$scope.married = data.married;更改为$scope.formData.married = data.married;，因为控制器中的ng-model和$scope变量不同。

在

最坏的情况下，您可能会在控制器中收到错误formData未定义。 因此，请在使用赋值之前定义$scope.formData = {};。

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_profile.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {
                        if (data.success) {
                      $scope.formData = {};
                      $scope.formData.dob = data.dob;
                      $scope.formData.married = data.married;
}