Question

我正在研究一个MEAN堆栈应用程序，其中我有两列和多行（100）的表。每行中的一列包含下面定义为inputDropdown的下拉列表：

.directive('inputDropdown', function($compile) {

    var template = 
        '<input class="form-control" ng-model="ngModel" ng-disabled="disabled">' +
        '<div class="dropdown">' + 
            '<div class="form-control" ng-repeat="value in list | filter:ngModel">' +
                '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
            '</div>' +
        '</div>';

    return {
        restrict: 'EA',
        require: '^form',
        scope: {
            ngModel: '=',
            list: '=',
            onSelect: '&',
            disabled:'=ngDisabled'
        },
        template: template,
        link: function(scope, element, attrs,mapController) {
            element.addClass('input-dropdown');

            if(scope.$parent.setDirty)
            {
                scope.makeFormDirty = mapController.$setDirty();
            }
            scope.select = function(e, value) {
                scope.ngModel = value;
                // scope.onSelect({$event: e, value: value});
                scope.makeFormDirty = mapController.$setDirty();
            };
        }
    };
})

和HTML：

   <tbody>
      <tr ng-repeat="var in Mappings | filter: searchVariable">
        <td>{{var.Name}}</td>
        <td>
          <div><input-dropdown name="fqn" ng-model="var.Variable" list="variables" ng-disabled="(var.IsDisable)"></input-dropdown></div> 
        </td>
        </tr>
  </tbody>

在指令中，variables中使用的列表（HTML中的ng-repeat）包含70K条目，因此它会冻结整个UI，因为它会为每一行绑定，因为每行的列表都相同。 / p>

我想要实现的是每当用户点击下拉列表时，只应该为该特定行呈现范围变量/列表，并且在模糊时它应该删除它。

或者建议我从范围变量（列表）延迟加载并在下拉列表中显示。

Answer 1

您只是要求ng-blur和ng-focus指令吗？

.directive('inputDropdown', function($compile) {

var template = 
    '<input class="form-control" ng-model="ngModel" ng-disabled="disabled" ng-focus="setDirectiveList()" ng-blur="removeDirectiveList()">' +
    '<div class="dropdown" ng-click="setDirectiveList()">' + 
        '<div class="form-control" ng-repeat="value in selectedList | filter:ngModel">' +
            '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
        '</div>' +
    '</div>';

return {
    restrict: 'EA',
    require: '^form',
    scope: {
        ngModel: '=',
        list: '=',
        onSelect: '&',
        disabled:'=ngDisabled'
    },
    template: template,
    link: function(scope, element, attrs,mapController) {
        element.addClass('input-dropdown');

        if(scope.$parent.setDirty)
        {
            scope.makeFormDirty = mapController.$setDirty();
        }
        scope.select = function(e, value) {
            scope.ngModel = value;
            // scope.onSelect({$event: e, value: value});
            scope.makeFormDirty = mapController.$setDirty();
        };
        scope.setDirectiveList= function() {
            scope.selectedList = list;
        }
        scope.removeDirectiveList= function() {
            scope.selectedList = [];
        }
    }
};

绑定范围变量（数组）以下拉焦点

1 个答案: