angular 1.x ng-options从值加载下拉列表

时间:2016-03-04 09:58:58

标签: javascript angularjs

https://plnkr.co/edit/lvxHUKXI9tuToSNsD3Hg?p=preview

这是我的plunker,我有这样的HTML

<select ng-model="dropdown" ng-options="option.description for option in list" ng-change="hmm()"></select>

然后我的数据源看起来像这样

$scope.list =   {"description":"jhello","value":4},"description":"bello","value":5}];
$scope.dropdown = 5;

我有ng-model="dropdown"

我想要做的是将模型的值设置为所选选项。因此,如果我设置dropdown = 5,则会选择$scope.list[1]。我知道我可以轻松地调用索引$scope.dropdown = $scope.list[1]等。但是,当我从数据库中提取数据以进行编辑以映射到此选项时,这需要额外的映射。然后额外的映射只在我尝试保存时将5值存储到数据库中(IE valueToSave = $ scope.dropdown.value)。如果我的模型或值可以自动设置正确的选项并自动准备保存,那就太好了。如果您有30个左右的下拉菜单并且有人点击编辑额外的映射来设置下拉列表并再次保存真的是加起来。如何使用$scope.dropdown = 5设置下拉选项,并确保更改下拉列表$scope.dropdown更新为正确值,以便保存?

2 个答案:

答案 0 :(得分:1)

只需更新您的ng-options,如下ng-options="option.value as option.description for option in list"

喜欢这个

<select class="dropdown-list form-control" name="UnitsOfLengthDefault" ng-model="dropdown" ng-options="option.value as option.description for option in list" ng-change="hmm()"></select>

答案 1 :(得分:0)

我认为制图是最好的方法。

使用此功能,您可以轻松找到并指定正确的值。

function findIndexInData(data, property, value) {
  var result = -1;
  data.some(function (item, i) {
    if (item[property] === value) {
      result = i;
      return true;
    }
  });
  return result;
}

所以你可以使用它:

$scope.list[ findIndexInData( $scope.list, 'value', 5 ) ];

See the plunker