Question

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

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

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

因此，如果用户点击ID 1，则下拉默认为 Julia 。

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

我该如何解决这个问题？

Answer 1

因此Lets有一个针对这种情况的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。

Answer 2

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

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

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

Answer 3

以下是您可以设置选项

的示例

在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开始。希望这是你想要实现的目标。

AngularJS使用ng-model

3 个答案: