Question

我在自定义指令中有一个select元素作为模板。它将数组作为参数，但不进行解析。

directive('myFilteringselectelement', function(){
    return {
        restrict:'E',
        template: '<span>{{filters[0][1]}}{{filters[0]}}{{selectfiltercount}}{{filters[selectfiltercount]}}</span><select send-message-select ng-model="myfilter" ng-options="filter.name for filter in {{filters[selectfiltercount]}}>"</select>'
    }   
}).

二维数组“过滤器”定义为：

$scope.filters = [  [{name: 'iron'}, {name: 'tin'}, {name: 'copper'}],
                    [{name: 'type1'}, {name: 'type2'}, {name: 'type3'}],
                    [{name: 'road1'}, {name: 'road2'}, {name: 'road3'}],
                    [{name: 'gwa1'}, {name: 'gwa2'}, {name: 'gwa3'}],
                    [{name: 'area1'}, {name: 'area2'}, {name: 'area3'}]
];

模板中的范围用于测试目的，效果很好：

{{filters[0][1]}}
{{filters[0]}}
{{selectfiltercount}}
{{filters[selectfiltercount]}}

但是选择元素效果不佳：

<select send-message-select ng-model="myfilter" ng-options="filter.name for filter in {{filters[selectfiltercount]}}>"</select>

在https://docs.angularjs.org/api/ng/directive/select中解释了ngOptions中的数组参数将起作用。当我使用具有一个维度的过滤器数组时，它正在工作：

$scope.filters = [{name: 'iron'}, {name: 'tin'}, {name: 'copper'}];

但是我想使用2维数组来使用多个select指令。当有多个select指令时，所有选择选项与一维数组相同（最新赋值...）

可能是什么原因导致它没有被解析？有什么想法吗？

干杯， ALP

这是从chrome抛出的错误日志：

Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%5B%7B%22name%22%3ANaNron%22%7D%2C%7B%22name%22%3A%22tin%22%7D%2C%7B%22name%22%3A%copper%22%7D%5D%3E&p4=%5B%7B%22name%22%3A%iron%22%7D%2C%7B%22name%22%3A%22tin%22%7D%2C%7B%22name%22%3A%copper%22%7D%5D%3E
    at Error (native)
    at http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:6:416
    at hb.throwError (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:190:254)
    at hb.primary (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:190:6)
    at hb.unary (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:197:82)
    at hb.multiplicative (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:196:324)
    at hb.additive (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:196:182)
    at hb.relational (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:196:125)
    at hb.equality (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:195:418)
    at hb.logicalAND (http://1x7.0.0.1:8000/app/components/javascripts/angular.min.js:195:294) angular.min.js:103
    (anonymous function) angular.min.js:103
    (anonymous function) angular.min.js:76
    $ angular.min.js:70
    v angular.min.js:59
    g angular.min.js:52
    v angular.min.js:59
    g angular.min.js:52
    (anonymous function) angular.min.js:51
    (anonymous function) filter.js:96
    n.event.dispatch jquery-2.1.1.min.js:3
    r.handle jquery-2.1.1.min.js:3

Answer 1

ng-options不进行插值。结尾的引号似乎也是不正确的。你能试试吗

ng-options="filter.name for filter in filters[selectfiltercount]"

AngularJS无法解析模板参数

1 个答案: