如何借助选项对象中存在的第三个参数来选择 ngOptions 中的选项？

Posted 2023-03-15

【中文标题】如何借助选项对象中存在的第三个参数来选择 ngOptions 中的选项？

【英文标题】：How to select the option in ngOptions with the help of the third parameter present in the option object?

【发布时间】：2019-02-01 05:05:20

【问题描述】：

我有用于选择下拉菜单的选项数组，例如

[
    key:1,value'foo',selected:true,
    key:2,value'foo2',selected:false
]

我想在我的模型中选择属性为 true 的选项值。所以对于我的模型的这个选项数组应该初始化并绑定到1。

感谢任何帮助！在此先感谢:)

为此，我知道我可以通过在控制器中循环并设置其属性选择为 true 的值来实现。我正在寻找更好的替代方案。我也尝试过ng-repeat 选项并且它有效，但我认为ngOptions 从性能的角度来看更好。

【参考方案1】：

如果我正确理解了要求：

angular.module('selectExample', [])
  .controller('ExampleController', ExampleController);

ExampleController.$inject = ['$scope'];

function ExampleController($scope) 
  $scope.selectOptions = [
      key: 1,
      value: 'foo',
      selected: true
    ,
    
      key: 2,
      value: 'foo2',
      selected: false
    
  ];
  
  $scope.filterOptions = filterOptions;
  
  setFirstOptions($scope, 'selected', $scope.selectOptions);


function filterOptions(data) 
  return data.filter(function(item) 
    return item.selected;
  );


function setFirstOptions($scope, variable, data) 
  var filteredOptions = filterOptions(data);
  if (filteredOptions.length > 0) 
    $scope[variable] = filteredOptions[0];
  


angular.bootstrap(
  document.querySelector('body'), ['selectExample']
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="ExampleController">
  <select ng-model="selected" ng-options="option.value for option in filterOptions(selectOptions)">
</div>