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

时间:2019-02-01 05:05:21

标签: angularjs angularjs-ng-repeat angularjs-ng-options

我有用于选择下拉列表的options数组

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

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

感谢您的帮助!!在此先感谢:)

为此,我知道我可以通过在控制器中循环并设置其属性为true的值来做到这一点。我正在寻找更好的替代方案。我也尝试过ng-repeat的选项,并且效果很好,但是我认为ngOptions从性能的角度来看更好。

1 个答案:

答案 0 :(得分:0)

如果我正确理解了要求:

listings
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']
);