Question

我正在尝试创建一个属性指令（因为我需要在我的项目中的多个位置使用此逻辑），用于选择下拉列表，如果items数组只有一个元素，它会自动选择唯一的项目。我有以下带有名为smart-select-dropdown的属性指令的HTML：

<select class="form-control" ng-model="selectedItem" smart-select-dropdown
          ng-options="item as item.name for item in items | filter: {someFilter}">
    <option value="" ng-bind="Select Item"></option>
</select>

这是我的指令代码：

angular.module('app').directive('smartSelectDropDown', function(){
   return{
      restrict: 'A',
      replace: true,
      link: function(scope, element){
         angular.element(document).ready(function () {
                if(element[0].options.length === 2){
                    element.find('select option:nth-child(2)').prop('selected', true);
                }
         });
      }
   }
});

这是控制器代码：

angular.module('app').controller('MyCtrl', function($scope){
   $scope.selectedItem = null;
   $scope.items = [
                    { 
                      id : 1,
                      name : 'Item 1'
                    },
                    { 
                      id : 2,
                      name : 'Item 2'
                    },
                    { 
                      id : 3,
                      name : 'Item 3'
                    }
                  ];
});

我面临的问题是element[0].options.length没有给我正确的长度。它总是给我1，这实际上是默认的'选择项'选项。它不包含实际需要的ng-options长度。谁能让我知道我在这里失踪了什么？

PS：我使用的是AngularJS版本1.2.17

Answer 1

您可以将 selectedItem 和项从控制器获取到指令范围，并检查条件并相应地设置selectedItem。

angular.module('app').directive('smartSelectDropDown', function(){
 return{
   restrict: 'A',
   replace: true,
   scope: {
  items: '=',
  selectedItem: '=selectedItem'
   }
   link: function(scope){
      if(scope.items.count == 1){
       scope.selectedItem = scope.items[0];
     }
    }
   });
  }
 }
});

但是，您可能必须修改代码以进行一些更正，因为我还没有测试过它。

注意：如果你只是为了这个目的使用指令，那么请关注@Rangamannar回答。

Answer 2

这可以在没有指令的情况下实现。

控制器代码更改：

angular.module('app').controller('MyCtrl', function($scope){
  $scope.items = [
                { 
                  id : 1,
                  name : 'Item 1'
                },
                { 
                  id : 2,
                  name : 'Item 2'
                }
              ]
  });
  $scope.selectedItem = items[1]; // or items[0] as per your requirement

HTML代码更改：

 <select class="form-control" ng-model="selectedItem"
      ng-options="item as item.name for item in items track by item.id">
    <!-- You may choose to remove this first option tag with in select -->
    <option value="" ng-bind="Select Item"></option>
 </select>

Answer 3

在您的情况下甚至不需要directive，如果长度为$scope.items，您只需检查ng-model长度并将第一个元素分配给1

<强>控制器：

angular.module('app').controller('MyCtrl', function($scope){
   $scope.selectedItem = null;
   $scope.items = [
    {
        id : 1,
        name : 'Item 1'
    },
    {
        id : 2,
        name : 'Item 2'
    }
    ]
    if($scope.items.length == 1){
        $scope.selectedItem = $scope.items[0];
    }
});

<强> HTML：

<select class="form-control" ng-model="selectedItem" ng-options="item as item.name for item in items">
    <option value="" ng-bind="Select Item"></option>
</select>

预选择下拉AngularJS中的唯一项目

3 个答案: