stf-angular-select

Custom reusable select for angular with wide posibilities

Showing:

Popularity

Downloads/wk

81

GitHub Stars

2

Maintenance

Last Commit

4yrs ago

Contributors

5

Package

Dependencies

3

License

ISC

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

stf-angular-select директива випадаючого списку

Директива випадаючого списку з можливістю пошуку і змінення зовнішнього виду і свого html

Transcludes

  • stfSelectLabel - Тег в якому розміщуєму бажаний html label
  • stfSelectValue - Тег в якому розміщуєму бажаний html поточного значення select
  • stfSearchInput - Тег в якому розміщуєму бажаний html фільтра для списка select
  • stfІelectOptions - Тег в якому розміщуєму бажаний html опцій списка select
  • stfSelectOption - Директива опції select, значення передаємо через ng-value
<np-stf-select name="senderAddress" ng-model="$ctrl.invoice.senderAddress" required ng-change="$ctrl.updateCalculation();">
    <stf-select-label>{{::('NP_INVOICES_EDIT.SENDER_ADDRESS'| translate)}}</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.personalAddressesFiltered track by address.id" ng-value="address">{{address.description}}</stf-select-option>
        <md-divider role="separator"></md-divider>
        <stf-select-option ng-value="null" data-ng-click="$ctrl.addNewAddressSender($ctrl.invoice.sender.id)">
            {{::('NP_INVOICES_EDIT.NEW_ADDRESS'| translate)}}
        </stf-select-option>
    </stf-select-options>
    <stf-search-input>
        <np-input-list-filter placeholder="{{::('NP_INVOICES_EDIT.FIND_ADDRESS'| translate)}}"
                                list-source="$ctrl.personalAddresses"
                                list-filtered="$ctrl.personalAddressesFiltered"
                                filterter-keys="['description']"></np-input-list-filter>
    </stf-search-input>
</np-stf-select>

instalation and using

npm install stf-angular-select --save

import "stf-angular-select/src/stf-select.scss";
import {StfSelectDirective, StfSelectOptionDirective} from "stf-angular-select";

angular.module("app", [])
    .constant('NP_STF_SELECT_THROTTLE_TIME', 100) // throtle  time of reaction after clicking
    .directive('npStfSelect', StfSelectDirective.Factory)
    .directive('stfSelectOption', StfSelectOptionDirective.Factory);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial