Группа текстовых полей Angularjs - PullRequest
0 голосов
/ 06 сентября 2018

Я пытаюсь добиться чего-то похожего в Angularjs 1.6 с начальной загрузкой 2.3 a textbox/div with + icon При нажатии кнопки + открывается раскрывающийся список. Выбор параметра из раскрывающегося списка добавляет выбранное значение в текстовое поле. Пользователь также может добавить простой текст до или после добавления интервала.

Я попробовал 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>

enter image description here Пожалуйста, руководство.

...