javascript - AngularJS 错误？ - 选择多个 - 根据选项数量动态设置大小

Question

我想动态控制多选的大小。

html

<select 
    class="form-control" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests"
    multiple="true"
    ng-multiple="true"
    name="tests"
    id="tests"
    size="{{ tests.length }}"
    ng-size="{{ tests.length }}">
</select>

js

$http({ method: 'GET', url: '/api/v1/test' })
    .success(function(data, status, headers, config) {
        $scope.tests = data;
    })
    .error(function(data, status, headers, config) {});

检查元素的输出

<select 
    class="form-control ng-valid ng-dirty" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests" 
    multiple="true" 
    ng-multiple="true" 
    name="tests" 
    id="tests" 
    size="0" 
    ng-size="7">
        ... Options ...
</select>

请注意 size 属性如何保持为 0，但是尽管使用了相同的内插 tests.length，但 ng-size 变为 7。

此外，尽管共有7个选项，但浏览器渲染尺寸只显示4个选项。

在 google chrome 的元素检查器中手动将 size="0" 更改为 size="7"，会更改选择的大小。

Answer 1

我在使用 @size 时遇到了一些问题。尝试 ng-attr-size，如:

<select
    ...
    ng-attr-size="{{ tests.length }}">
</select>