有什么方法可以在 angular UI select 的下拉列表中的第 n 项之后创建分隔符?
Is there any way to create seperator after nth item in dropdown of angular UI select?
Below is the code where i am are implementing UI select.
I took the Id by inspecting element and got the below HTML element:
After gettingthe id("ui-select-choices-row-0-0") i applied my own css
.ui-select-choices-row-0-0{
pointer-events: none;
}
So for the first time it is working fine. But when i navigate to
some other page and again coming to the Ui select then due to rendereing
id is getting changed(.ui-select-choices-row-1-0)
(.ui-select-choices-row-2-0). So second time it is not working.
Is there any solution for that?
<div id="ui-select-choices-row-0-0" class="ui-select-choices-row ng-scope" role="option"
ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}"
ng-repeat="item in $select.items track by $index"
ng-if="$select.open"
ng-mouseenter="$select.setActiveItem(item)"
ng-click="$select.select(item,false,$event)">
<a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append="">
<span class="ng-binding ng-scope" ng-bind-html="trustAsHtml((item))">--------------</span>
</a>
</div>
<ui-select ng-model="$parent.model"
name="{{name}}"
id="{{name}}"
theme="bootstrap"
ng-required="{{isRequired}}"
on-select="updateItem($item, $model)">
<ui-select-match placeholder="Enter 2 or more characters">
<div>
{{$select.selected}}
<button class="btn btn-xs clear btn-right" ng-click="clear($event)"><i class="fa fa-remove"></i></button>
</div>
</ui-select-match>
<ui-select-choices repeat="item in data track by $index"
refresh="refreshData($select.search)"
refresh-delay="100">
<span ng-bind-html= "trustAsHtml((item))"></span>
</ui-select-choices>
</ui-select>
Actually I had set of frequently used currency that i was sending from backend
and with currencies i also sent "-------------". So now in UI select data is
like : Frequently used currency->"----------" -> then all the currencies.
So what i did i inspect the element and took the HTML generated from that.
and applied below css on that class:
.ui-select-choices-row:nth-child(38){
pointer-events: none;
background-color: #d3d3d3;
}
Now it is working fine but one thing is that i have noticed, that element
"---------------" is on 35th number. But if i have written CSS for 35th
element it is not working. I used nth-child(38) then it is working.
But still I want to know how to create seperator in UI select??
Below is the code where i am are implementing UI select. I took the Id by inspecting element and got the below HTML element: After gettingthe id("ui-select-choices-row-0-0") i applied my own css
.ui-select-choices-row-0-0{ pointer-events: none; } So for the first time it is working fine. But when i navigate to some other page and again coming to the Ui select then due to rendereing id is getting changed(.ui-select-choices-row-1-0) (.ui-select-choices-row-2-0). So second time it is not working. Is there any solution for that?
<div id="ui-select-choices-row-0-0" class="ui-select-choices-row ng-scope" role="option"
ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}"
ng-repeat="item in $select.items track by $index"
ng-if="$select.open"
ng-mouseenter="$select.setActiveItem(item)"
ng-click="$select.select(item,false,$event)">
<a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append="">
<span class="ng-binding ng-scope" ng-bind-html="trustAsHtml((item))">--------------</span>
</a>
</div>
<ui-select ng-model="$parent.model"
name="{{name}}"
id="{{name}}"
theme="bootstrap"
ng-required="{{isRequired}}"
on-select="updateItem($item, $model)">
<ui-select-match placeholder="Enter 2 or more characters">
<div>
{{$select.selected}}
<button class="btn btn-xs clear btn-right" ng-click="clear($event)"><i class="fa fa-remove"></i></button>
</div>
</ui-select-match>
<ui-select-choices repeat="item in data track by $index"
refresh="refreshData($select.search)"
refresh-delay="100">
<span ng-bind-html= "trustAsHtml((item))"></span>
</ui-select-choices>
</ui-select>
Actually I had set of frequently used currency that i was sending from backend
and with currencies i also sent "-------------". So now in UI select data is
like : Frequently used currency->"----------" -> then all the currencies.
So what i did i inspect the element and took the HTML generated from that.
and applied below css on that class:
.ui-select-choices-row:nth-child(38){
pointer-events: none;
background-color: #d3d3d3;
}
Now it is working fine but one thing is that i have noticed, that element
"---------------" is on 35th number. But if i have written CSS for 35th
element it is not working. I used nth-child(38) then it is working.
But still I want to know how to create seperator in UI select??