Angular limitTo doesn't work for ng-model or ng-option
I want to display restricted words in a select dropdown. Cuz text-overflow doesn't work for option. so I want to use limitTo. I add like
<select class="form-control" ng-model="tempRequirement" ng-options="item as item.question for item in model.unCompliantRequirementList[model.currentItem] | limitTo: 10"></select>
or
<select class="form-control" ng-model="tempRequirement | limitTo: 10" ng-options="item as item.question for item in model.unCompliantRequirementList[model.currentItem]"></select>
Why don't they work?
I tried it instead. But then I cannot call loadTheActions (tempRequirement), it seems that temRequirement is null. Why?
<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>
Thanks for your reply. Solved by adding a limit after 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>
source to share
This is because it limitTo
will apply to the entire array, not every element of the array. The effect of your first code will be to only show the first 10 items in the dropdown menu.
The second example doesn't make sense, you can't use filters for ng-model
because it must be an assignable expression.
source to share
Correction by @GregL. In fact, you can use limitTo with any valid expression to limit the actual content that the end user will see in his view.
So your HTML will look like this:
<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>
Hope it helps! ..
source to share