服务器提供的下拉列表中的角度默认值

时间:2015-12-10 21:07:13

标签: javascript angularjs

我有一个美国州的下拉列表,其中包含对我们的网络API的调用。我有一个填写用户详细信息的编辑页面,我需要将该下拉列表绑定到用户信息中的状态。我确定这与ng-options有关,但我不知道如何实现它。

以下是我的下拉列表HTML:

<select data-ng-model="form.vchOfficeStateVchID" ng-options="s as s.StateVchID for s in userdetails.vchOfficeStateVchID" style="height:25px">
    <option value="">--Select State--</option>
    <option ng-repeat="state in states" value="state.StateVchID">{{state.StateVchID}}</option>
</select>

我的控制器中填充下拉列表的功能是:

getStates();
function getStates() {
    operatorService.getallstates()
    .success(function (data) {
        $scope.states = data;
    });
};

它返回一个数组,其状态缩写为其键“StateVchID”(我没有创建此数据库)。

使用以下功能在控制器中返回用户信息:

$scope.showDetails = function (user) {
    $scope.noUser = false;
    var userid = user.UserID;
    operatorService.getuserdetails(userid)
    .success(function (data) {
        $scope.userdetails = data;
        $scope.form.vchOfficeStateVchID = userdetails.vchOfficeStateVchID;
        $scope.form.vchOfficeCountryVchID = userdetails.vchOfficeCountryVchID;
    });
    $scope.viewUser = true;
};

在用户的详细信息中,状态缩写保存在vchOfficeStateVchID字段中。

如何让我的下拉列表显示用户的正确状态?基本上,我需要state.StateVchID = userdetails.vchOfficeStateVchID。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

查看this示例:

HTML

var app = angular.module("myApp", []);

app.controller("myController", ["$scope", function($scope){
    $scope.userdetails = {
      vchOfficeStateVchID: 3
    }

    $scope.form = {};

    $scope.states = [
      {
        Name: "New York",
        StateVchID: 1
      },
      {
        Name: "Texas",
        StateVchID: 2
      },
      {
        Name: "Las Vegas",
        StateVchID: 3
      },
      {
        Name: "Hawaii",
        StateVchID: 4
      }
    ];

    $scope.form.vchOfficeStateVchID = $scope.userdetails.vchOfficeStateVchID;
}]);

的JavaScript

{{1}}