AngularJS 用 ng-model 改变下拉值答案

【问题标题】：AngularJS changing dropdown value with ng-modelAngularJS 用 ng-model 改变下拉值
【发布时间】：2018-09-08 13:54:14
【问题描述】：

nameList contains [“Julia”, “Evan”, “Tomas”];

select ng-model=“names” ng-options=“x for x in nameList”

在控制器中，我有一个服务 api 调用 GetNameByID/{id}”，根据 id，我想初始化模态表单的下拉值。

所以如果用户点击ID1，下拉菜单默认为Julia。

问题出在服务调用中，当我尝试通过 $scope.names = data 初始化模型时，它在顶部添加了一个空选项，而不是选择 Julia。当我console.log(data) 时，它会打印 “Julia” 但它会变成 <option value=“?”></option>

我该如何解决这个问题？

【问题讨论】：

标签： javascript angularjs dropdown angular-ngmodel

【解决方案1】：

这是一个可以设置选项的示例

在html文件中

<select ng-model="selectedName" ng-options="x for x in nameList"></select>

在js文件中

app.controller('myCtrl', function($scope) {
var id = 1;

$scope.names = ["Julia", "Evan", "Tomas"];
$scope.selectedName = $scope.names[id-1];    <---- here you can pass you id.
});

用 1 减去 id，因为数组从 0 开始。希望这是您想要实现的。

【讨论】：

【解决方案2】：

您可以使用ng-init 来初始化下拉列表的第一个值，如下所示：

<select ng-model="names" ng-init="names = data[0]" ng-options="x for x in data">
    <option value="">Select</option>
</select>

data[0] 中的[0] 是数组的位置。

【讨论】：

【解决方案3】：

因此，让我们有一个 HTML 示例来说明这种情况：

<div ng-app ng-controller="MyCtrl">
    <select ng-model="names" ng-options="item for item in nameList">
    </select>

    <p>Selected : {{names}}</p>

    <button ng-click="Update(2)"> Update(1)</button> 
</div>

Conrtoller 有一个服务调用，它会根据索引相应地更新您的下拉列表。

function MyCtrl($scope) {
    $scope.names = "Julia"
    $scope.nameList =  ["Julia", "Evan", "Tomas"]; 

    $scope.Update = function(_value){ 
        $scope.names = $scope.nameList[ parseInt(_value)] ;
    }
}

请查看运行代码，jsfiddle。

【讨论】：