stf-angular-select/src/example/example.html

Custom reusable select for angular with wide posibilities

<form>
    <div style="height: 300px;"></div>
<np-stf-select name="senderAddress" ng-model="$ctrl.address" required ng-change="$ctrl.updateCalculation();"
    options-class="'bla-bla'">
    <stf-select-label>Адреса</stf-select-label>
    <stf-select-value>{{$ctrl.address.description}}</stf-select-value>
    <stf-select-options>
        <stf-select-option >Тру ля ля</stf-select-option>
        <div></div>
        <stf-select-option data-ng-repeat="address in $ctrl.addresses track by address.id" ng-value="address">
            {{address.description}}
        </stf-select-option>
    </stf-select-options>
    <stf-fixed-option data-ng-click="$ctrl.clickFiced()">
        Fixed option
    </stf-fixed-option>
    <stf-search-input>
        <input>
    </stf-search-input>
</np-stf-select>
<np-stf-select name="senderAddress" ng-model="$ctrl.invoice.senderAddress" required ng-change="$ctrl.updateCalculation();"
    options-class="'bla-bla'">
    <stf-select-label>Адреса</stf-select-label>
    <stf-select-value>{{$ctrl.invoice.senderAddress.description}}</stf-select-value>
    <stf-select-options>
        <stf-select-option data-ng-repeat="address in $ctrl.addresses track by address.id" ng-value="address">
            {{address.description}}
        </stf-select-option>
    </stf-select-options>
    <stf-fixed-option data-ng-click="$ctrl.clickFiced()">
        Fixed option
    </stf-fixed-option>
    <stf-search-input>
        <input style="width: 30%; border: 1px solid black;">
        <input style="width: 30%; border: 1px solid black;">
        <input style="width: 30%; border: 1px solid black;"
        <input style="width: 30%; border: 1px solid black;"
    </stf-search-input>
</np-stf-select>
<np-stf-select name="senderAddress" ng-model="$ctrl.invoice.senderAddress" required ng-change="$ctrl.updateCalculation();"
    options-class="'bla-bla'">
    <stf-select-label>Адреса</stf-select-label>
    <stf-select-value>{{$ctrl.invoice.senderAddress.description}}</stf-select-value>
    <stf-select-options>
        
        <stf-select-option data-ng-repeat="address in $ctrl.addresses track by address.id" ng-value="address">
            {{address.description}}
        </stf-select-option>
    </stf-select-options>
<stf-search-input>
    </stf-search-input>

</np-stf-select>

<np-stf-select name="senderAddress" ng-model="$ctrl.invoice.senderAddress" required ng-change="$ctrl.updateCalculation();"
    options-class="'bla-bla'">
    <stf-select-label>Адреса</stf-select-label>
    <stf-select-value>{{$ctrl.invoice.senderAddress.description}}</stf-select-value>
    <stf-select-options>
    </stf-select-options>
    <stf-fixed-option data-ng-click="$ctrl.clickFiced()">
        Fixed option
    </stf-fixed-option>
    <stf-search-input>
        <input>
    </stf-search-input>
</np-stf-select>

<div class="ng-submitted">
<np-stf-select name="senderAddress" ng-model="$ctrl.invoice.senderAddress" required ng-change="$ctrl.updateCalculation();"
    options-class="'bla-bla'">
    <stf-select-label>Адреса</stf-select-label>
    <stf-select-value>{{$ctrl.invoice.senderAddress.description}}</stf-select-value>
    <stf-select-options>
    </stf-select-options>
    <stf-fixed-option data-ng-click="$ctrl.clickFiced()">
        Fixed option
    </stf-fixed-option>
    <stf-search-input>
        <input>
    </stf-search-input>
</np-stf-select>
<div>

<input ng-model="$ctrl.invoice1" name="invoice1" required>
<input ng-model="$ctrl.invoice2" name="invoice2" required>
<input ng-model="$ctrl.invoice3" name="invoice3" required>
<input ng-model="$ctrl.invoice4" name="invoice4" required>
</form>