lordfriend / nya-bootstrap-select Goto Github PK

Is there a way to set the directive dirty?
On a regular form field (like an input) it is possible by using

$scope.formName.inputFieldName.$dirty = true

But the line above won't work for nya-bootstrap-select.

Add support for different sized buttons or bring back the data-styles attribute to allow passing classes to the button element such as btn-sm

Place for fix

Dropdown screen overflow on small screens does not show a scrollbar. http://silviomoreto.github.io/bootstrap-select/ examples work fine with long lists and small screens - a scollbar in the dropdown appears when the screen is too small to fit entire dropdown contents. nya-bootstrap-select does not.

Can You use

<span class="text-muted">{{title}}</span>

when You define title attr? Then it will look like placeholder in normal input.

When I have data-size limited to ex. 2 and have 10 options and use downkey to go to ex 5th option it doesn't scroll and higlighted option is out of sight.

Hi thanks for this great project. I'm using version 2.0.10 and ran into an edge case that's throwing an error. The problem is here and caused by modelValue being null.

modelValue is null because I wanted to reset the select to nothing as a cancel button has been clicked. Maybe checking for it's existence on the offending line or defaulting it to an empty array might fix the problem.

As in topic

Edit:
I see that You need to add class btn-block to btn-group and get rid of width: 220px;

Hi !

I'm in v2.0.10
In live-search, when there is no result, the option "NO SEARCH RESULT" is shown, but the first item is selected if we press "enter" key.

I fixed it (looking #56 @erlis commit) removing && childElement.hasClass('selected') in findFocus function, but it corrupt the opening behaviour (focus selected)

An other issue linked: if you select multiple options but not first,if you re-open the dropdown and navigate with keyboard, on bottom key, it loop on selected options. (the code edit above also fix this issue)

It is my first time i look your code, but i think it exists a better way to fix

button should have typ="button" because clicking it without it it submits form.

var DROPDOWN_TOGGLE = '<button class="btn btn-default dropdown-toggle" type="button">' +

When using the live search, arrow selection and scrolldown didn't work. First option is highlighted always. If I select any other option both first option & other option is highlighted.
When live search was removed, functionality returned.

Here are some css hacks that makes input-group looks nicelly with Your script:

.input-group .form-control:not(:first-child) .form-control {
  border-radius: 0;
}
.input-group .form-control {
  z-index: inherit;
}
.input-group .input-group-btn.nya-bs-select:not(:last-child) > .btn {
  border-right: 0;
}
.input-group .nya-bs-select:last-child > .btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Component doesn't follow the default select behavior with ngModelController.

Properties $pristine, $touched not being updated

Hi,

I have dynamic ng-disabled for select element and couldn't get it working. With this addition to code I can update bootstrap-select:

scope.$watch(function () {
    return scope.$eval(attrs.ngDisabled);
}, function (newVal) {
    if(newVal == true)
    {
        $(element).prop('disabled',true);
        $(element).selectpicker('refresh');
    }
    else{
        $(element).prop('disabled',false);
        $(element).selectpicker('refresh');
    }
});

html:

 <select class="form-control nya-selectpicker" ng-model="edit.model.ClassificatorId"
  title="Select a type" data-ng-disabled="edit.model.Id != undefined">
      <option ng-repeat="cl in edit.app.Classificators" value="{{cl.Id}}">{{cl.Name}}</option>
</select>

Bootstrap-select v1.6.2
nya-bootstrap-select v1.2.6
jQuery JavaScript Library v2.1.1
AngularJS v1.2.20

TypeError: undefined is not a function
at makeOptionArray (http://localhost:63343/test/src/test/nya-bootstrap-select.js:205:26)
at Object. (http://localhost:63343/test/src/test/nya-bootstrap-select.js:123:22)
at Object.watchExpression (:754:29)
at Scope.$digest (http://localhost:63343/test/src/js/libs/angular.js:12439:40)
at Scope.$delegate.proto.$digest (:844:31)
at Scope.$apply (http://localhost:63343/test/src/js/libs/angular.js:12712:24)
at Scope.$delegate.proto.$apply (:855:30)
at http://localhost:63343/test/src/js/libs/angular.js:1419:15
at Object.invoke (http://localhost:63343/test/src/js/libs/angular.js:3918:17)
at doBootstrap (http://localhost:63343/test/src/js/libs/angular.js:1417:14)

adding data-live-search="true" not changing dropdown-menu height when using dynamic options, but works fine with static options.

example here:
http://plnkr.co/edit/nmIsETmqzjNrSzGM9oLV?p=preview

Hi,

I have a problem causing the width of select fields to be set to width of high value when setting data-width="auto".

I don't know how to reproduce this problem, since it is happening only sometimes, but I suspect it have a deal with the browser caching, because it is more likely to happen when pressing the browser back button.

Also note that the options of the select tag are loaded as part of the page, and not dynamically thorough angular binding.

I'll be happy to contribute any additional information,
Thanks

Hello, Thank you for developing this directive. I was wondering if you are planning to add functionality for items selection in the select element through keystrokes, it mean that when pressing "a" the first element that starts with "a" must must be selected.
Regards.

Can I use HTML in group option? <span class="dropdown-header">{{$group}}</span>

EDIT:
and anwser -= Yes I can:
<span class="dropdown-header" ng-bind-html="$group"></span>

Sorry I don't get the concept of data-container="body". What is body? An DOM reference? Reference to the controller?

1. When I use tab key and focus to Your select it doesn't open - I have to press down key to open - can You make it to open on focus?
2. I can change option highlight with tab key - I think that options should have tabindex="-1"
3. On blur with tab key options should close.

Hi,

Thank you for your great directive.
I have a little problem, when I use static list. The selected item didn't highlighted and showed the text, not even your example (http://nya.io/nya-bootstrap-select/#!/main/getting-started).

<ol class="nya-bs-select" ng-model="model" title="Sort by...">
   <li class="nya-bs-option"><a>Default state</a></li>
   <li class="nya-bs-option"><a>Name (A-Z)</a></li>
   <li class="nya-bs-option"><a>Name (Z-A)</a>
</ol>

Thanks,

Unable to apply bootstrap button styles such as btn-sm btn-xs, etc

This line needs to be changed to allow for all buttons styles not just danger, warning, etc.

if(/btn-(?:primary|info|success|warning|danger|inverse)/.test(className)) {

btn-*

When there are no options present in a nya-selectpicker, the component does not get markup.

A workaround could be to include an empty option if there is no data in the model, like:
<option value="" ng-hide="jobs.length != 0"></option>

How to set a currently selected value from controller?
I tried to change the value of the model, but it does nothing for select. And i didnt find any other ways in the documentation.

The defaults are:

$.fn.selectpicker.defaults = {
  style: 'btn-default',
  size: 'auto',
  title: null,
  selectedTextFormat : 'values',
  noneSelectedText : "Nenhum selecionado",
  noneResultsText : "Nenhum resultado encontrado",
  countSelectedText: "{0} de {1} selecionado",
  maxOptionsText: ["Limite alcançado ({n} {var} max)", "Limite do grupo alcançado ({n} {var} max)", ["items", "item"]]
  width: false,
  container: false,
  hideDisabled: false,
  showSubtext: false,
  showIcon: true,
  showContent: true,
  dropupAuto: true,
  header: false,
  liveSearch: false,
  actionsBox: false,
  multipleSeparator: ', ',
  iconBase: 'glyphicon',
  tickIcon: 'glyphicon-ok',
  maxOptions: false
};

Is there a way to change this defaults values ?
Using selectpicker i can pass as a data attribute or on selectpicker function

Using 1.2.6, can we have custom HTML content with the use of ngOptions? I was using ngRepeat for custom HTML content, however, I had problems with Angular expressions within the option like:

<select class="nya-selectpicker" multiple data-container="body" data-size="6" ng-model="logs">
    <option ng-repeat="option in log_types" value="{{option}}" data-content="<span>{{option.k}}&nbsp;<i ng-if="option.v.realtime" class='icon-time'></i></span>">{{option.k}}</option>
</select>

As you can see above, I want to only display the icon when option.v.realtime is true. However, option.v.realtime doesn't get parsed.

I know the new version allows for custom HTML however, because I'm doing something special with the dropdown (it's hacky), it's preventing me from using it properly. But if the old version really won't fit my needs, then I'd just have to use the new one.

You've got option that it highlights first option.
Problem is that when You select ex. third option and return to edit the same field first option is higlighted and third. I think only third option should be highlighted.

I tried implementing the nya-bootstrap-select with my Angular app (which is running 1.3.0-beta-16), and there appears to be a very big performance issue that affects any page where the widget is located. Any interaction with the user interface (typing, selecting from the dropdown) for controls bound with ng-model are very slow, even for those which aren't select pickers. Removing the nya-selectpicker class and reverting to the standard 'selectpicker' class fixes the problem. So, I'm led to believe that there is an issue which needs to be looked into.

When you select any item and then open the select box again, it's highlight the first item with border, even if another item was actually selected, here an example:

Should behave like original bootstrap select:

In multiple (I suppose that also in normal mode) I cannot select option that has value=0

Hi,

I just wanted to throw this out there to see if anyone else is experiencing this. When I load the page, the <ol class="nya-bs-select"> element does not have the class open. I set a breakpoint at:

Line 270 of nya-bs-select.js

When I click on the dropdownToggle or the <button>, the $element HTML which refers to the <ol> now contains the class open. Naturally line 270 will negate that and cause the dropdown to not show up. Hence a second click is required to show the dropdown.

I know this is weird, but I'm at my wits ends as to where could the open class be possibly added to the HTML when I click the dropdownToggle for the very first time after page load. Anyone?

Hello @lordfriend ！

First of all, thanks for good code! During implementation of nya-bootstrap-select to project I'm working on, I found the issue:

nya-bootstrap-select depends on bootstrap-select which depends on twitter bootstrap.js (it uses Dropdown). In the project we switched to angular ui bootstrap, which substitutes bootstrap.js, so bootstrap-select could not use its dropdown functionality. We solved this by copying the code from bootstrap.js. I could pull request this functionality, what do you think?

At the nya blog page http://nya.io/ it is written that nya-bootstrap-select will be updated. Could you share your plans? Do you want to turn it to something like way?

Thanks,
林林。

It's great plugin (now I'm using ui-select and Your solution is much better).
I have problem though:/
I's not working with angular 1.3...
First thing that angular dropdown is different in 0.12 (You have to have attrs dropdown and dropdown-toggle.
Second is that ng-model isn't filled after clicking option.

Can You fix it?

Please remove debugging information from minified version eg:
console.log ,compiled and linked messages it's very annoying.

Hi Your script is'nt working (dropdown not opens) when You add ng-switch

<div ng-switch='cond'>

        <div ng-switch-when="myselect">
            <ol id="mySelect" class="nya-bs-select form-control" ng-model="myModel" live-search="true">
                <li nya-bs-option="item in items">
                    <a>
                        {{item.nazwa}}
                        <span class="check-mark">ok</span>
                    </a>
                </li>
            </ol>
        </div>

    </div>

Hi!

I'm having a weird issue because I cannot reproduce it on your live search page. But in my application if I use live-search then while I'm typing nothing is automatically selected, on your example the first match is selected, exactly as I need it.

I'm using the latest version: v2.0.10

Do you think there's something that's interfering with it?

I am trying to $watch the value change of model bound to a select component but it never works.

Template:

<ol id="envSelect" class="nya-bs-select" ng-model="environment" ng-change="envChanged()">
        <li nya-bs-option="eachEnv in environments">
            <a>{{ eachEnv }}</a>
        </li>
    </ol>

JS:
$scope.environment = '';
$scope.$watch("environment", function(){
console.log("watch");
})

the problem is that setValue for array is using indexInArray() while there should be used keyOfObject() as for single select

<select name="thread" id="thread"
            class="form-control nya-selectpicker show-tick"
            ng-model="fabric.thread" required data-container="body">
        <option ng-repeat="thread in threadOptions" value="{{thread.id}}"
                data-content="<i class='glyphicon glyphicon-tint' style='color: {{thread.colour}}'></i> {{thread.name}}">
          {{thread.name}}
        </option>
      </select>

Thank!

I need to be able to run my "title" through a filter before showing it on the screen. Because the value of the title attribute is simply copied in the compile function of the nyaBsSelect directive, it seems we can't accomplish this without moving the logic into the link function and using the $compile service to do it there. Any thoughts?

Example:

<ol class="nya-bs-select" ng-model="dynModel" title="{{ 'SOME TITLE' | someFilter }}">
    <li nya-bs-option="option in options">
        <a>
            {{option.name}}
        </a>
    </li>
</ol>

Can You make that data will be loader through ajax? ui-select has refresh and refresh-delay attrbs

The methods .scope() and .isolateScope() of an angular.element will return undefined when debug info is disabled: $compileProvider.debugInfoEnabled(false); as stated here and here.

So this piece of code won't work while running your app on production mode:

function getOptionValue(nyaBsOption) {
  var scopeOfOption;
  if(valueExpFn) {
    scopeOfOption = nyaBsOption.scope(); // won't work on prod
    return valueExpFn(scopeOfOption);
  } else {
    if(nyaBsSelectCtrl.valueIdentifier || nyaBsSelectCtrl.keyIdentifier) {
      scopeOfOption = nyaBsOption.scope(); // won't work on prod
      return scopeOfOption[nyaBsSelectCtrl.valueIdentifier] || scopeOfOption[nyaBsSelectCtrl.keyIdentifier];
    } else {
      return nyaBsOption.attr('value');
    }
  }
}

Hi! How i can clear the selected item after form submission?, te value of the ng-model turn empty but the widget still show the previous selected item.

Sorry for my english

Thanks

I'm using Your great script in my own directive (it generates input field on params).
I want to use multiple="{{model.multiple||undefined}}" that is suppose to be multiple attr set as undefined if model.multiple isn't set.
But Your scripts test only typeof multiple attr. Maybe You could include also checking empty string?
Like:

isMultiple = (typeof $attrs.multiple !== 'undefined' && $attrs.multiple);

If I change nya-bs-option when option is selected - it doesn't refresh button>span.filter-option label.
ex:

<ol class="nya-bs-select form-control" ng-model="myModel">
            <li nya-bs-option="item in items">
                <a>
                    {{item.title}}
                </a>
            </li>
        </ol>
scope.items = [
                            {id: 0, title: 'title0'},
                            {id: 1, title: 'title1'}
                        ];

If I select id:1 and then change that item title scope.items[1].title="Different title" button label isn't changed - stays title1

Now Your plugin is english dependent. Phrases like NO_SEARCH_RESULT and items selected are hard coded.
Maybe You can construct Provider to define those texts in general config?

Successfully tested your component with model-values of type string.
But if i bind it to a model of type number the component always Shows 'Nothing selected'.
I tried it with static values like in this sample code:

            <ol class="nya-bs-select form-control" ng-model="testmodel">
                <li value="0" class="nya-bs-option">
                    <a>
                        Beratungswunsch durch Kunden
                    </a>
                </li>
                <li value="1" class="nya-bs-option">
                    <a>Beratung durch Beraterinitiative</a>
                </li>
            </ol>

in JavaScript:

this works: $scope["testmodel"] = "1";
this does not work: $scope["testmodel"] = 1;

It seems to me that nya is leaking if used with multiple ng-view
I was managed to reduce leaks by adding

 $scope.$on('$destroy', function () {
            dropdownMenu.off();
            dropdownToggle.off();
            searchBox.off();
            nyaBsSelectCtrl.off();
            $document.off('click', outClick);

            console.log('destroy called for task nya-bs-select ');
        });

it looks like watchers are not cleaned up at all on $destroy.

This directive is perfect for multiselect.. However, having a max number of options is a must-have. Is there an ETA or anything that can be done to hack it and make this work? Thanks!