Question

大家好我想根据angularjs中数据库中的值fetch显示下拉列表中的选定值。我正在尝试基本功能，我从数据库中获取它后，我将ng-model值设置为下拉列表。但这对我不起作用。它总是显示我空白的下拉列表。

我的下拉结构

 <select name="singleSelect" ng-model="measurements.Backzip" class="form-control">
                                <option value="">--Select --</option>
                                <option ng-repeat="sel in selectables" value="{{sel.value}}">{{sel.label}}</option>
                            </select>

我的代码，用于从数据库中获取数据并为测量值分配值.Backzip

首先我宣布了变量

 $scope.measurements = {};
$scope.measurements.Backzip = "";

然后在此之后我创建了这个函数

 function GetDetails() {

        $scope.selectables = [
       { label: 'Yes', value: 'true'},
       { label: 'NO', value: 'false' } 
        ];

        $scope.getemail = store.get('usersession');

        var productResult = customerService.getMeasurementDetails($scope.getemail);
        productResult.then(function (result) {
            if (!result.data) {
                console.log("empty");
            }
            else { 
                store.set("mvalues", result.data);
                $scope.measurements = result.data;
                $scope.measurements.Backzip = result.data.Backzip;
                console.log("zip",result.data.Backzip);

            }
        });
    };

我的api的Json输出

{"id":2,"userid":null,"Height":3,"Kameezlength":3,"Shoulder":3,"SleeveLength":3,"SleeveMoori":3,"Armhole"
:3,"Chest":3,"Waist":3,"Hip":3,"KameezGhera":3,"Chalk":3,"FrontNeck":3,"BackNeck":1,"BackDori":3,"Backzip"
:false,"Plates":3,"SalwarLength":3,"SalwarHalfPatiala":null,"SalwarFullPatiala":null,"SalwarPouncha"
:3,"SalwarAssan":3,"SalwarBelt":3,"PazamiLength":32,"PazamiChurridaar":null,"PazamiThigh":3,"PazamiKnee"
:3,"PazamiMoori":3,"PazamiAssan":3,"PazamiBelt":3,"useremail":"azadrchauhan@gmail.com"}

此处数据正在成功获取。但我无法将所选值分配给下拉列表。任何人都可以帮忙。我尝试了几乎所有来自stackoveflow的例子。但没有任何作用。也许我错过了什么

Answer 1

这是尝试为不是字符串的选择赋值的经典问题。幸运的是，Angular有一个完美的结构来解决这个问题ng-options。

将您的HTML更改为：

<select 
    name="singleSelect"
    ng-model="measurements.Backzip"
    class="form-control"
    ng-options="option.value as option.label for option in selectables">
</select>

然后将控制器中的代码更改为：

$scope.selectables = [
    { label: '--Select--'},
    { label: 'Yes', value: true},
    { label: 'NO', value: false }];

**更新：在原始版本中添加了默认的“--Select--”选项。

无法使用angularjs将数据库中的选定值分配给下拉列表

1 个答案: