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

debugcn 发表于 Dev

拉尼·拉德克利夫（Rani Radcliff）

我有一个来自美国的下拉列表，该列表是从对我们的Web 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。

非常感谢您的协助！

精氨酸0n

看一下这个例子：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。