Angular没有正确编译ng-options

时间:2016-09-18 19:48:15

标签: angularjs

我想要指令将标签范围= [ - 3,3]替换为ng-options。

不幸的是,以下解决方案并不好

<html lang="pl">
<head>
    <title>Its directive range</title>
</head>
<body>
    <div ng-app="app">      
        <div ng-controller="AppCtrl">
            <select ng-model="value" range="[-3, 3]"></select>
            <span>{{value}}</span>
        </div>
    </div>      

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('directives', []);

        angular.module('app', ['directives']);

        angular.module('app').controller('AppCtrl', function($scope) {
            $scope.value = 2;
        });

        angular.module('directives').directive('range', function($compile) {
            return {
                restrict: 'A',
                scope: {
                    range: '='
                },
                link: function(scope, elem, attr) {
                    scope.options = [];

                    for(var i = scope.range[0]; i <= scope.range[1]; ++i) {
                        scope.options.push(i);
                    }

                    elem.attr('ng-options', 'o as o for o in options track by o');

                    elem.removeAttr('range');

                    $compile(elem)(scope);
                }
            };
        });
    </script>
</body>

创建ng-options标签后,选择包含选项value =“number:2”而不是选定值2 ...

1 个答案:

答案 0 :(得分:0)

ng-options 指令可以选择不同类型的变量,它可以选择混合类型,如:

<select name="mydata" 
        ng-model="number" 
        ng-options="value.a || value for value in ['-10', -5, 0, 5,'10',{a: '20'},'25']">

其中第一个,第五个和最后一个项目是 STRING ,最后一个项目是 OBJECT ,其余项目是 NUMBERs 。在HTML中,这些选项呈现为:

<select name="mydata" 
        ng-model="number" ng-options="value.a || value for value in ['-10', -5, 0, 5,'10',{a: '20'},'25']">
  <option label="-10" value="string:-10">-10</option>
  <option label="-5" value="number:-5">-5</option>
  <option label="0" value="number:0">0</option>
  <option label="5" value="number:5">5</option>
  <option label="10" value="string:10" selected="selected">10</option>      
  <option label="20" value="object:8">20</option>
  <option label="25" value="string:25">25</option>
</select>

为了区分不同类型,在值之前添加带有分号的类型本身,如number:5object:4,这些类型前缀被 ng-model 忽略,这是正确更新,请参阅plunker http://plnkr.co/edit/THIriUsSRMV3PPGvd8oN?p=preview

我将您的数字范围更改为字符串范围,使其类似于原生HTML选择元素:

for (var i = scope.range[0]; i <= scope.range[1]; i++) {
  scope.options.push((i).toString());
}
在这种情况下,

类型前缀被省略,仅在初始加载时有<option value="? string:2 ?"></option>元素,在第一次手动选择后将其删除。