javascript - AngularJS 不解析模板参数

Question

我有一个选择元素作为自定义指令中的模板。它接受一个数组作为参数，但不对其进行解析。

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 元素无法正常工作:

<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'}];

但我想使用二维数组以便使用多个选择指令。当有多个选择指令时，所有选择选项都与一维数组相同(最新分配...)

未解析的原因可能是什么？有什么想法吗？

干杯，阿尔卑斯山

这是从 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="过滤器中过滤器的名称[selectfiltercount]"