Angularjs n选项:选择获取值或选择默认值

Angularjs n选项:选择获取值或选择默认值,angularjs,ng-options,Angularjs,Ng Options,在查看了文档和这里的许多问题之后,我找不到解决问题的方法。我有一个下拉列表,其中填充了数据库中的数据。为了填补这个空白,我将ngOptions与selectas方法一起使用 <select ng-model="modelthing" ng-options="item.id as item.description for item in categories"> 这有两个问题,首先,[1]选择json数据中的第二个条目,而不是将1作为键的条目。 第二: 当我继续打开和关闭填充的表单时

在查看了文档和这里的许多问题之后,我找不到解决问题的方法。我有一个下拉列表,其中填充了数据库中的数据。为了填补这个空白,我将ngOptions与
selectas
方法一起使用

<select ng-model="modelthing" ng-options="item.id as item.description for item in categories">
这有两个问题,首先,
[1]
选择json数据中的第二个条目,而不是将
1
作为键的条目。 第二:

当我继续打开和关闭填充的表单时,大约有一半的时间我得到默认值,另一半时间我得到实际选择的值。这显然是因为当我从填充的表单获取数据并且代码同步运行时,
ng model=“modelshing”
会被覆盖。有没有办法确保它是异步运行的?还是我的方法完全错了


到目前为止,我尝试过的其他事情:

我注意到,当我在ngOptions中使用
select as items
短语时,select中的选项有一个
value=“number:3”
,而不是一个普通的数字。而不是
select as
修复了这一问题,但不可预见的是,我选择的值与下拉列表中的值不匹配,因为它们是普通的
3
而不是
number:3


如果
modelthing
模型为空,则检查表单初始化,如果是空的,则将其设置为默认值

使用
id
比使用对象本身更容易管理

<select ng-model="modelthing" 
        ng-options="item.id as item.description for item in categories">

$scope.categories = $http.get(thingurl)
    .then(function (result) {
        $scope.categories = result.data;
        $scope.modelthing = 1; // your model is bound to id not the object
    });
这样,无论顺序如何,两个异步调用解析后的最终值始终是检索到的id

剩下的唯一一个小问题是默认值将显示一段时间,直到返回实际选定值。您可以保留此行为或隐藏选择,直到选定值返回

  • 您需要将一个新对象(负值或0)添加到数组(类别)中

  • 将最后一个对象指定给您的模型(modelthing)对象

请尝试我下面的代码(否则将其设置为密钥)

更新:

1) 这有两个问题,[1]首先选择json数据中的第二个条目,而不是键为1的条目

索引数组以0开头,而不是以1开头。因此,如果键看起来是1,但索引值是0您使用的是数组而不是arraylist。有意义吗

只需将0替换为1,就像

$scope.categories[0].id

2) 当我继续打开和关闭填充的表单时,大约有一半的时间我得到默认值,另一半时间我得到实际选择的值。这显然是因为当我从填充的表单获取数据并且代码同步运行时,ng model=“modelshing”会被覆盖。有没有办法确保它是异步运行的?还是我的方法完全错了

只需使用空数据在全局上声明模型对象

$scope.categories = [];
$scope.modelthing = {};
更新2

3) 我试着根据它的键来选择一个值,而不是它在数组中的位置,因为键不一定按升序排列在数组中

var-key=1//它不是静态的

对于(var i=0;i)使用json数据更新帖子。对于默认值“Select”,这会起作用。我想从服务器获取的数据集中预先选择一个值,我想将下拉列表设置为(例如)key=3的值。是的,我现在明白了,我明白你想说的了。我知道数组从0开始。我试着根据它的键选择一个值,而不是它在数组中的位置,因为键不一定按升序排列在数组中。我真的很感谢你的帮助,感谢你花时间回复。但是尽管你更新2解决方案确实选择了正确的值,它本质上与@Icycool的解决方案相同,尽管有点复杂。我当前的问题如发帖中所述;数据被同步调用,导致在使用正确的值时出现问题。啊,是的,你是对的,这是声明ng模型的正确方法。谢谢!尽管如此它无法解决同步调用…此声明和捕获整个模型的声明显然并排运行,有时会显示默认值,有时会显示选定值。:(这样做!这是一种公认的“角度方式”吗如果
getData()
函数在
getSelected()
启动之前意外完成,
$scope.selected
值在该点上是否仍然为空?(我的意思是,我似乎无法打破它。到目前为止,它工作得完美无缺,这只是出于好奇)。谢谢!@Kablam实际上默认情况下,
$http
是异步的。您的问题是两个异步调用以不同的顺序返回,但代码有时运行异步,有时运行同步。如果
selections
selected
之前返回,Angular将首先显示默认值,然后在返回值时更新为实际值自动地,这就是我在最后一段中描述的问题。我明白了!非常感谢!:)
function getData() {
  $http.then(function(data) {
    $scope.selections = data;
    if (!$scope.selected) $scope.selected = data[0].id;
  })
}

function getSelected() {
  $http.then(function(data) {
    $scope.selected = data.id;
  })
}
$scope.categories = $http.get(thingurl)
    .then(function (result) {
        $scope.categories = result.data;
        $scope.categories.Push(id:"0",description:"Select");
        $scope.modelthing = $scope.categories[$scope.categories.length - 1];
    });
$scope.categories = [];
$scope.modelthing = {};
var key = 1; //it's not static 
for( var i=0;i<$scope.categories.length;i++)
{
  if($scope.categories[i].id==key)// Once your key is correct,then the value will be assign
  {
    $scope.modelthing = $scope.categories[i]
  }
}