设置AngularJS选择的选定值

Setting up selected values for AngularJS select

本文关键字：AngularJS 选择 设置      更新时间：2023-09-26

EDIT-我已经用我想做的事情的更简化的版本更新了我的quetion，但我也会保留原始版本。。（保持答案一致。）

我是AngularJS的初学者，目前在尝试将数据绑定到我的select标签时遇到了问题

我想做什么

  • 用户单击edit链接
  • 现有对象加载到页面（通过后端api）
  • drpodown中的对象值应为selected

以下是我的代码

#in the HTML page
<select ng-model="FormData.name"
    ng-options="n.name for n in names"
    class="form-control input-lg no-border-radius" required>
</select>
#in my service I have defined the `names` array
names: [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}]
#this is what I do in initial form loading
$scope.name = <service name>.names;
$scope.FormData.name = $scope.names[0];

因此，我将值1或2保存在DB中并将其取回。如果GET请求成功，我会进行

$scope.FormData = data; #data is the object form the server

所以问题是，当我这样做的时候，除了select tags

如何根据服务器请求设置选择标记的选定值。

我问题的新简化版本

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
$scope.FormData.name = $scope.names[1];

在下面的数组中，我如何像一样通过name或value来选择项目，而不是通过索引来选择项目

$scope.FormData.name = $scope.names['2']; #will select the {name: 'Batman', val: '2'}

nst不要将值加载为字符串，请尝试加载为INT:

names: [{name: 'Superman', val: parseInt('1')},{name: 'Batman', val: parseInt('2')}]

由于ng选项只从数组中获取名称，因此它们的id将成为它们的索引。

你也可以试试：

<select ng-model="FormData.name"
    ng-options="n.val as n.name for n in names"
    class="form-control input-lg no-border-radius" ng-model="FormData.val" required>
</select>

这样，索引就变成了字符串"1"。

编辑：

忘记了ng模型。

给定代码中发现的问题很少：

1） $scope.name已初始化，而不是$scope.names

2） 在未初始化$scope.FormData 的情况下访问$scope.FormData.name

请在下面找到更正的代码：

var names= [{name: 'Superman', val: '1'},{name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
$scope.FormData.name = $scope.names[0];

根据问题的新简化版本回答：以下代码可用于根据名称初始化下拉列表

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
/*Iterating through the array and finding the required object based on the 'name' field*/
var isSuccess = false; //variable to prevent the iteration once the match is found
angular.forEach(names, function(name){
 if(!isSuccess && name.name === 'Batman'){
  $scope.FormData.name = name;
  isSuccess = true;
}
});
};

请检查这是否有帮助！

相关文章：