我有一个美国州的下拉列表,其中包含对我们的网络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。
非常感谢任何帮助!
答案 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}}