添加空间到＆lt;＆选择GT;与NG选项 [英] Add space to <select> with ng-options

问题描述

我如何添加前导空格到＆LT;选择＆GT; 采用了棱角分明NG选项选项

 ＆LT; D​​IV NG控制器=MyCntrl＆GT;
    静态值（作品）
    ＆LT;选择＆GT;
        ＆LT;期权价值=黑＆GT;黑白LT; /选项＆GT;
        ＆LT;期权价值=白＆GT;＆安培; NBSP;＆白色LT; /选项＆GT;
        ＆LT;期权价值=红色＆GT;＆安培; NBSP;＆安培; NBSP;红色和LT; /选项＆GT;
        ＆LT;期权价值=蓝色＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆蓝色LT​​; /选项＆GT;
        ＆LT;期权价值=黄色＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆黄色LT; /选项＆GT;
    ＆LT; /选择＆GT;    采用了棱角分明（只有第一个默认工程）从JS值
    ＆LT;选择NG模型=色NG选项=c.name在颜色C＆GT;
        ＆LT;期权价值=＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆默认LT; /选项＆GT;
    ＆LT; /选择＆GT;
＆LT; / DIV＆GT;
 

JS：

  angular.module（对myApp，[]）。
    控制器（MyCntrl，['$范围'，函数（$范围）{
        $ scope.colors = [{
            名称：'黑'，
            灯罩：'黑暗'
        }，{
            名称：'和; NBSP;白'，
            灯罩：光
        }，{
            名称：'和; NBSP;＆安培; NBSP;红，
            灯罩：'黑暗'
        }，{
            名称：'和; NBSP;＆安培; NBSP;＆安培; NBSP;蓝色，
            灯罩：'黑暗'
        }，{
            名称：这里'黄'，//空间
            灯罩：光
        }];
    }]）;
 

解决方案

您可以格式化选项文本：

 ＆LT;选择NG模型=色NG选项=（'和; NBSP;'+ c.name）在颜色C＆GT;
    ＆LT;期权价值=＆GT;＆安培; NBSP;＆默认LT; /选项＆GT;
＆LT; /选择＆GT;
 

修改

如果你想生成的＆放大器; NBSP; 动态这是一个稍微复杂一些。假设你有你的一个功能，它知道有多少＆放大器; NBSP; 要添加，那么你可以这样写这个函数：

  $ scope.addSpaces =功能（彩色）{
    变种数= 1; //把你的逻辑在这里
    VAR的结果=;
    对于（VAR I = 0; I＆LT;计数;我++）{
        结果+ = String.fromChar code（160）;
    }
    返回结果;
};
 

在你的HTML这将是：

 ＆LT;选择NG模型=色NG选项=（addSpaces（C）+ c.name）在颜色C＆GT;
    ＆LT;期权价值=＆GT;＆安培; NBSP;＆默认LT; /选项＆GT;
＆LT; /选择＆GT;
 

这工作，因为我们并置UNI code为＆放的性格; NBSP; （如＆放大器;＃160; ），而不是实体，因此没有任何逃避的 element.text（）功能。

How do I add leading spaces into the <select> options using Angular ng-options?

<div ng-controller="MyCntrl">
    Static values (works)
    <select>
        <option value="black">black</option>
        <option value="white">&nbsp;white</option>
        <option value="red">&nbsp;&nbsp;red</option>
        <option value="blue">&nbsp;&nbsp;&nbsp;blue</option>
        <option value="yellow">&nbsp;&nbsp;&nbsp;&nbsp;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="">&nbsp;&nbsp;&nbsp;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',
            shade: 'dark'
        }, {
            name: '   blue',
            shade: 'dark'
        }, {
            name: '       yellow', // spaces here
            shade: 'light'
        }];
    }]);

解决方案

you can format the option text:

<select ng-model="color" ng-options="('&nbsp;'+c.name) for c in colors">
    <option value="">&nbsp;default</option>
</select>

EDIT

If you want to generate the   dynamically it is a little bit more complicated. Suppose you have a function in your controller that knows how many   you want to add, then you can write this function like this:

$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;
};

in your html it will be:

<select ng-model="color" ng-options="(addSpaces(c)+c.name) for c in colors">
    <option value="">&nbsp;default</option>
</select>

This works because we concatenate the unicode character for   (e.g.  ) in our string and not the entity, so there is nothing to escape for the element.text() function.

这篇关于添加空间到＆lt;＆选择GT;与NG选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！