Question

我想在选择下拉列表中显示有限的单词。 Cuz文本溢出不适用于选项。所以我想使用limitTo。我添加像

<select class="form-control" ng-model="tempRequirement" ng-options="item as item.question for item in model.unCompliantRequirementList[model.currentItem] | limitTo: 10"></select>

或

<select class="form-control" ng-model="tempRequirement  | limitTo: 10" ng-options="item as item.question for item in model.unCompliantRequirementList[model.currentItem]"></select>

为什么他们不工作？

我尝试了以下。但后来我无法触发loadTheActions（tempRequirement），似乎temRequirement为null。为什么呢？

<select class="form-control actionplan-dropdown m-t-5" ng-model="tempRequirement">
                                    <option ng-repeat="item in model.unCompliantRequirementList[model.currentItem]" value="item.question"> {{item.question | limitTo: 90}}</option>
            </select>

            <button class="btn btn-sm btn-default m-t-10 m-b-10" ng-click="loadTheActions(tempRequirement)" ng-disabled="tempRequirement === undefined"><span class="glyphicon glyphicon-list"></span></button>

感谢您的回复。通过在item.question之后添加限制来解决：

<select class="form-control" ng-model="tempRequirement" ng-options="item as item.question  | limitTo: 10 for item in model.unCompliantRequirementList[model.currentItem]"></select>

Answer 1

这是因为limitTo将应用于整个数组，而不是数组中的每个项目。您的第一个代码的效果是仅显示下拉列表中的前10个项目。

您的第二个示例没有意义，您不能对ng-model使用过滤器，因为它必须是可分配的表达式。

Answer 2

更正@GregL，您实际上可以将limitTo与任何有效表达式一起使用，以限制最终用户在其视图中看到的实际内容。

因此，您的HTML实际上看起来像这样：

<select class="form-control" ng-model="tempRequirement">

    <option  ng-repeat="item in model.unCompliantRequirementList[model.currentItem]" value="{{item.value}}"> {{item.displayValue | limitTo: 10}}</option>

</select>

希望这有助于!! ..

角度限制不适用于ng-model或ng-option

2 个答案: