Я пытаюсь добиться чего-то похожего в Angularjs 1.6 с начальной загрузкой 2.3
При нажатии кнопки + открывается раскрывающийся список. Выбор параметра из раскрывающегося списка добавляет выбранное значение в текстовое поле. Пользователь также может добавить простой текст до или после добавления интервала.
Я попробовал div с иконкой, и он успешно добавляет span в div, используя ng-repeat, но я не могу добавить текст до или после span.
Добавление кода сделано до сих пор:
* 1004 СКС *
&__textbox {
outline: none;
width: 35%;
min-height: 100px;
border: 1px solid $bion-light-grey;
border-radius: 3px;
padding: 5px 35px 5px 5px;
position: relative;
&--item {
display: inline-block !important;
background-color: $bion-light-grey;
padding: 5px !important;
margin-bottom: 5px;
border-radius: 3px;
}
&--content {
overflow: auto;
height: 90px;
width: 100%;
}
&--empty-msg {
color: $bion-dark-grey;
}
}
HTML:
<div class="bion-catalog-campaign-ads-links__textbox">
<div class="bion-catalog-campaign-ads-links__textbox--content">
<span class="bion-catalog-campaign-ads-links__textbox--empty-msg" ng-if="$ctrl.isMessageEmpty()">
{{::('i18n.bionCatalogCampaignAdsLinks.catalogMessageHelpText' | translate)}}</span>
<span class="bion-catalog-campaign-ads-links__textbox--item bion-margin-right--10" ng-repeat="catalogMessage in $ctrl.catalogMessages track by $index">
{{catalogMessage.field}}
<i class="fa fa-times" ng-click="$ctrl.removeCatalogMessage($index)"></i>
</span>
</div>
<div class="bion-catalog-campaign-ads-links__addMore"
uib-dropdown>
<button type="button" class="btn btn-default" uib-tooltip="{{::('i18n.bionCatalogCampaignAdsLinks.addCatalogField'
| translate)}}" uib-dropdown-toggle>
<i class="fa fa-plus"></i>
</button>
<ul class="dropdown-menu" uib-dropdown-menu>
<li role="menuitem"
ng-repeat="(optionKey, optionValue) in $ctrl.catalogFields"
>
<a class="btn bion-text-align--left"
href=""
ng-click="$ctrl.addMoreRule(optionValue)">{{::(optionValue.label | translate)}}
</a>
</li>
</ul>
</div>
</div>
Пожалуйста, руководство.