javascript - 服务器提供的下拉列表中的 Angular 默认值

Question

我有一个美国各州的下拉列表，它是通过调用我们的 Web API 填充的。我有一个填写用户详细信息的编辑页面，我需要将该下拉列表绑定(bind)到用户信息中的状态。我确信这与 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>

我的 Controller 中填充下拉列表的函数是:

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

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

用户信息通过以下函数返回到 Controller 中:

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

非常感谢任何帮助!

Answer 1

看看this示例:

HTML

<div ng-app="myApp" ng-controller="myController">
    <select name="vchOfficeStateVchID" ng-model="form.vchOfficeStateVchID" ng-options="s.StateVchID as s.Name for s in states">
      <option value="">--Select State--</option>
    </select>
    <br/>
    <div>
      <h3>
        Selected ID:
      </h3>
      {{form.vchOfficeStateVchID}}
    </div>
</div>

JavaScript

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