如何在< select>中添加前导空格使用Angular ng-options的选项?
<div ng-controller="MyCntrl"> Static values (works) <select> <option value="black">black</option> <option value="white"> white</option> <option value="red"> red</option> <option value="blue"> blue</option> <option value="yellow"> yellow</option> </select> Values from JS using angular (only the first-default works) <select ng-model="color" ng-options="c.name for c in colors"> <option value=""> default</option> </select> </div>
JS:
angular.module("myApp",[]). controller("MyCntrl",['$scope',function ($scope) { $scope.colors = [{ name: 'black',shade: 'dark' },{ name: ' white',shade: 'light' },{ name: ' red',{ name: ' blue',{ name: ' yellow',// spaces here shade: 'light' }]; }]);
您可以格式化选项文本:
<select ng-model="color" ng-options="(' '+c.name) for c in colors"> <option value=""> default</option> </select>
编辑
如果你想生成& nbsp;动态它有点复杂.假设你的控制器中有一个功能,它知道有多少& nbsp;你想添加,然后你可以像这样编写这个函数:
$scope.addSpaces= function(color){ var count = 1;// put your logic here var result = ""; for(var i=0; i<count; i++){ result+= String.fromCharCode(160); } return result; };
在您的HTML中它将是:
<select ng-model="color" ng-options="(addSpaces(c)+c.name) for c in colors"> <option value=""> default</option> </select>
这是有效的,因为我们连接了& nbsp;的unicode字符. (例如 )在我们的字符串而不是实体中,因此element.text()函数没有任何东西可以逃脱.