Javascript 选择dropsdown选项-angularjs时会显示空格_Javascript_Angularjs_Html Select_Space_Dropdownbox

Javascript 选择dropsdown选项-angularjs时会显示空格

javascript angularjs

Javascript 选择dropsdown选项-angularjs时会显示空格,javascript,angularjs,html-select,space,dropdownbox,Javascript,Angularjs,Html Select,Space,Dropdownbox,我已经在AngularJS中创建了一个应用程序，其中有一个下拉列表，使用过滤器在选项中添加空格。应用程序可以很好地使用下拉列表中的选项，在值之前有缩进空间，但问题是当选择一个有空间的选项时，该空间也会显示在视图中，如下所示实际上，我希望在下拉选项中显示缩进空间，但唯一的问题是，我不希望在上面显示的选择时显示该空间谁能告诉我一些解决方案，以防止空间显示时，选择我的代码如下所示 <select> <option ng-repeat="(key, value) in

我已经在AngularJS中创建了一个应用程序，其中有一个下拉列表，使用过滤器在选项中添加空格。应用程序可以很好地使用下拉列表中的选项，在值之前有缩进空间，但问题是当选择一个有空间的选项时，该空间也会显示在视图中，如下所示

实际上，我希望在下拉选项中显示缩进空间，但唯一的问题是，我不希望在上面显示的选择时显示该空间

谁能告诉我一些解决方案，以防止空间显示时，选择

我的代码如下所示

<select>
    <option ng-repeat="(key, value) in headers">{{value | space}}
    </option>
</select>


{{值|空间}}

试试这个

更改选择框html如下

<select ng-model="selectedOption" ng-options="item.value for item in headers"></select>


var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.headers = [{
        value: 'value 1'
    }, {
        value:'value 2',
        mainId: 12
    }, {
        value: 'value 3'
    }, {
        value: 'value 4',
        mainId: 14
    }, {
        value: 'value 5'
    }, {
        value: 'value 6',
        mainId: 18
    }];
    $scope.selectedOption = $scope.headers[0]; //Add this line
});

app.filter('space', function() {
  return function(text) {
       if(_.isUndefined(text.mainId))
       {
           console.log('entered mainId');
           return text.value;
       }
       else
       {
           console.log('entered');
           return '\u00A0\u00A0' + text.value;
       }
  };
});


var-app=angular.module（'myApp'，[]）；
应用控制器（'ArrayController'，函数（$scope）{
$scope.headers=[{
值：“值1”
}, {
值：'value 2'，
mainId:12
}, {
值：“值3”
}, {
值：“值4”，
mainId:14
}, {
值：“值5”
}, {
值：“值6”，
mainId:18
}];
$scope.selectedOption=$scope.headers[0]；//添加此行
});
app.filter（'space'，function（））{
返回函数（文本）{
if（uu.isUndefined（text.mainId））
{
console.log（'entered mainId'）；
返回text.value；
}
其他的
{
console.log（'entered'）；
返回'\u00A0\u00A0'+text.value；
}
};
});

在不使用jquery的情况下尽可能接近，在选择该选项时临时更改其视图状态。如果这不能满足您的要求，并且您仍然希望在下拉菜单打开时显示缩进，请查看如何检测选择组件的状态并相应地更新显示功能。或者，你可以在其中管理细节，但如果你在很多地方没有使用它，我怀疑这是值得的

var app = angular.module('myApp', []);

app.controller('ArrayController', function ($scope) {
    $scope.headers = [{
        value: 'value 1'
    }, {
        value: 'value 2',
        mainId: 12
    }, {
        value: 'value 3'
    }, {
        value: 'value 4',
        mainId: 14
    }, {
        value: 'value 5'
    }, {
        value: 'value 6',
        mainId: 18
    }];

    $scope.chosen = $scope.headers[0].value;

    $scope.display = function(header) {
        var chosenObject = _.find($scope.headers, {value: $scope.chosen});
        if (!_.isUndefined(header.mainId) && header !== chosenObject) {
            return '\u00A0\u00A0' + header.value;
        } else {
            return header.value;
        }
    }
});

此处为HTML：

<div ng-app='myApp' ng-controller="ArrayController">
    <br></br>
    SELECT:
    <select ng-model="chosen" ng-options="header.value as display(header) for header in headers">
    </select>
</div>

HTML:

给定您的代码，您可以添加一个helper指令，以在选择选项后删除

link

函数中的空格

例如，在select和指令中添加一个

id

<select id="mySelect" option-without-space>
    <option ng-repeat="(key, value) in headers">{{value | space}}
    </option>
</select>

这需要jQuery的一点帮助，但我认为这不是什么大问题

这是一本书

首先，这是一个很好的问题。不幸的是，我花了太多的时间试图找到解决办法。从CSS到使用ngModelController$formatters，再到我在下面发布的解决方案（如您所见，这并不是最优的），我已经尝试了一切。请注意，我认为我的解决方案不值得被选为答案。它只是“sorta”起作用，但与其他解决方案一样，它有一个致命的缺陷

然而，由于你的问题是：

有谁能告诉我一些防止空间堵塞的方法吗选择时显示

我的官方回答是：

否

没有跨浏览器的方法来实现这一点。再多的CSS、jQuery或Angular magic都无法实现这一点。虽然这可能令人失望，但我认为这将是你问题的唯一正确答案

没有人能够为您提供一种解决方案，防止空间显示在选择框中，同时将其保留在跨浏览器可靠工作的选项中。Chrome和Firefox允许对select、options和optgroup系列中的元素进行一定程度的样式化，但没有任何东西是一致的，在任何地方都适用

我最擅长的是跑步

它使用了optgroup将为您执行缩进的事实，但不同浏览器处理缩进的方式却有着巨大的差异。对一些人来说，你可以摆脱问题，但其他人不起作用（而且永远不会）。我把它贴出来，也许有人会受到启发，想出一个方法来证明我错了

<body ng-app="app">
  <div ng-app='myApp' ng-controller="ArrayController">
    <div>{{selectedValue}}</div>

    SELECT:
    <select ng-model="selectedValue" >
      <option indented="item.mainId" ng-repeat="item in headers">{{item.value}}</option>
    </select>
  </div>
</body>

(function() {

  var app = angular.module('app', []);
  app.controller('ArrayController', function($scope, $timeout) {
    $scope.headers = [{
      value: 'value 1'
    }, {
      value: 'value 2',
      mainId: 12
    }, {
      value: 'value 3'
    }, {
      value: 'value 4',
      mainId: 14
    }, {
      value: 'value 5'
    }, {
      value: 'value 6',
      mainId: 18
    }];
  });

  app.directive('indented', function($parse) {
    return {
      link:function(scope, element, attr){
        if($parse(attr.indented)(scope)) {
          var opt = angular.element('<optgroup></optgroup>');
          element.after(opt).detach();
          opt.append(element);
        }
      }
    };
  });
})();


{{selectedValue}}
选择：
{{item.value}}
（功能（）{
var-app=angular.module（'app'，[]）；
app.controller（'ArrayController'，函数（$scope，$timeout）{
$scope.headers=[{
值：“值1”
}, {
值：“值2”，
mainId:12
}, {
值：“值3”
}, {
值：“值4”，
mainId:14
}, {
值：“值5”
}, {
值：“值6”，
mainId:18
}];
});
app.directive（'indented'，function（$parse）{
返回{
链接：功能（范围、元素、属性）{
if（$parse（attr.indented）（范围））{
var opt=角度元素（“”）；
元素之后（opt.detach（）；
附加选项（元素）；
}
}
};
});
})();

如果您打开问题并允许实现一个指令，该指令模仿select的行为，但使用li元素构建，那么这将是微不足道的。但是你不能用select来做这件事。


<select ng-model="selectedValue" ng-change="selVal = selectedValue.trim(); selectedValue=selVal">
    <option ng-if="selVal">{{selVal}}</option>
    <option ng-repeat="(key, value) in headers" ng-if="selVal != value.value">
        {{value | space}}
    </option>
</select>

{{selVal}}
{{值|空间}}

您已经删除了下拉列表中的空格，实际上我希望该空格出现在下拉列表中，唯一的问题是我不希望在选择时显示该空格他希望在选择时保留该空格view@alsafoo是的，你是对的，我想要下拉列表中的那个空间，唯一的问题是，我不希望在选择使用jquery进行修剪时显示该空间it@alsafoo除了使用jquery，没有其他方法了……通过jquery，我们如何才能做到这一点呢？我想，使用filter是一种干净的方法……在给定的JSIFDDL中，在选择该选项时，不会显示空格，但问题是在选项选择上空间被移除使用过滤器在我的方法中不起作用，因为我需要访问所选元素。否则，您可以使用（标题|空格）代替显示（标题），它将显示通过过滤器的文本。我在回答中已经提到，它也会临时删除选择列表中所选元素的缩进，如果这不起作用

<select id="mySelect" option-without-space>
    <option ng-repeat="(key, value) in headers">{{value | space}}
    </option>
</select>

app.directive('optionWithoutSpace', () => {
        return {
            restrict: 'A',
            link: function(scope, elem, attributes) {

                var selectedOptionWithoutSpace = function () {
                    var selectedOption = $('#mySelect option:selected');

                    var optionText = selectedOption.text();

                    selectedOption.text(optionText.trim())

                    return false;
                };

                $(elem).on('change', selectedOptionWithoutSpace);

            }
        }
    })

<body ng-app="app">
  <div ng-app='myApp' ng-controller="ArrayController">
    <div>{{selectedValue}}</div>

    SELECT:
    <select ng-model="selectedValue" >
      <option indented="item.mainId" ng-repeat="item in headers">{{item.value}}</option>
    </select>
  </div>
</body>

(function() {

  var app = angular.module('app', []);
  app.controller('ArrayController', function($scope, $timeout) {
    $scope.headers = [{
      value: 'value 1'
    }, {
      value: 'value 2',
      mainId: 12
    }, {
      value: 'value 3'
    }, {
      value: 'value 4',
      mainId: 14
    }, {
      value: 'value 5'
    }, {
      value: 'value 6',
      mainId: 18
    }];
  });

  app.directive('indented', function($parse) {
    return {
      link:function(scope, element, attr){
        if($parse(attr.indented)(scope)) {
          var opt = angular.element('<optgroup></optgroup>');
          element.after(opt).detach();
          opt.append(element);
        }
      }
    };
  });
})();

<select ng-model="selectedValue" ng-change="selVal = selectedValue.trim(); selectedValue=selVal">
    <option ng-if="selVal">{{selVal}}</option>
    <option ng-repeat="(key, value) in headers" ng-if="selVal != value.value">
        {{value | space}}
    </option>
</select>