ngOptions: select 提取值或 select 默认值

Question

在查看文档和此处关于 SO 的众多问题后，我找不到解决我的问题的方法。我有一个下拉列表，其中填充了数据库中的数据。为了填充它，我将 ngOptions 与 select as 方法结合使用。

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

现在我想要的是默认选项（可以由管理员更改，因此不能硬编码为 <option>）如果之前没有值被 selected，以及其中之一时的 selected 值。

$scope.categories = $http.get(thingurl)
    .then(function (result) {
        $scope.categories = result.data;
        //$scope.modelthing= $scope.categories[1].id; 
        $scope.modelthing= 1; 
    });

~~这有两个问题，首先 [1] selects json 数据中的第二个条目，而不是具有 1 作为键。第二个：Solved this with help from Icycool in their comment below.~~

当我继续打开和关闭填充的表单时，大约有一半时间我得到默认值，另一半时间我得到实际 selected 值。这显然是因为当我从填充的表单中获取数据并且代码同步运行时 ng-model="modelthing" 被覆盖。有没有办法确保它异步运行？还是我的方法完全错误？

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

我注意到当我在 ngOptions 中使用 select as item in items 短语时，我的 select 中的选项有一个 value="number:3" 而不是一个普通的数字。 Using track by in ngOptions 而不是 select as 解决了这个问题，但是我的 selected 值与下拉列表中的值不匹配，因为那些是普通的 3 number:3.

一个确实有效但感觉非常不规则且有点脏的解决方案是在 modelthing 模型是否为空时检查表单初始化，如果是的话, 将其设置为默认值。

Answer 1

使用 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
    });

请注意，integer 1 和 string "1" 在这种情况下可能不会被相同对待，它需要匹配 [=29= 中返回的类型].

第 2 部分：您的意思是模型和选择来自不同的 $http 调用？可以通过在应用默认值之前检查现有值来修复它

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;
  })
}

通过这种方式，无论顺序如何，两个异步调用都解析后的最终值将始终是检索到的 ID。

唯一剩下的小问题是默认值会显示一会儿，直到真正选择的值 returns。您可以保留此行为或隐藏选择，直到选定值 returns.

Answer 2

You need add a new object (with negative value or 0) to your array (categories).

assign the last object to your model (modelthing) object.

请尝试我下面的代码（否则将其获取密钥）

$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];
    });

更新：

1)There are two problems with this, first of all the [1] selects the second entry in the json data, not the one that has 1 as key

索引数组以 0 开头，而不是 1。所以如果键看起来是 1 但索引值为 0。您正在使用 array不是 arraylist 。有道理吗？

像

一样把 1 换成 0

$scope.categories[0].id

2)When I keep opening and closing a populated form about half of the time I get the default value, and the other half I get the actual selected value. This is obviously because the ng-model="modelthing" gets overwritten when I fetch the data form the populated form and the code runs synchronous. Is there a way to make sure this runs asynchronous? Or is my approach just plain wrong?

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

$scope.categories = [];
$scope.modelthing = {};

更新 2

3) I was trying to select a value based on its key, not its place in the array, because the keys are not necessarily placed in the array in ascending order

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]
  }
}

ngOptions: select 提取值或 select 默认值

ngOptions: select fetched value OR select default value

angularjs

ng-options