adityasharat / angular-chosen Goto Github PK

Hi, so I've noticed the same issue with both here and over at wangshijun/angular-bootstrap-chosen#1. If you load angular before jquery and chosen you will get that chosen isn't a function on the element. The github page doesn't reflect on when angular should be loaded. I might make a PR to address it so it becomes more clear, and the only way i found it out was copying your script tags on the gh-page.

I'm having an issue with a multiple select when editting an entity in my application.

In my application, I can edit a material which has multiple categories. When creating a new material (this is the same form in HTML), it's possible to add categories and these are saved to the database. However: when editting a material, selected categories are loaded from the API seperatly, and stored in a scope variable, but the chosen select remains empty.

Am I missing something?

$scope.selectedcategories = [];
API.get('api/v1/material/' + id + '/category').then(function (response) {
    $scope.selectedcategories = response.data;
});

<select chosen multiple
        name="category"
        id="category"
        ng-model="selectedcategories"
        options="categories"
        ng-options="category.name for category in categories">
</select>

Hi, @adityasharat

i found that ng-disabled is not working with the plug-in. Help me

Is it possible for angular-chosen to work with composed objects.

Given an array like this:
ctrl.employee = [{"Employee_id": 29, "Name": "John Smith", "Initials": "JS"},
{"Employee_id": 30, "Name": "John Dow", "Initials": "JD"},
{"Employee_id": 31, "Name": "Klark Kent", "Initials": "KK"},
{"Employee_id": 32, "Name": "Fred Flistone", "Initials": "FF"},
{"Employee_id": 33, "Name": "John Wick", "Initials": "JW"},
{"Employee_id": 34, "Name": "Gautier Patrick", "Initials": "PG"}];

Show the name property in the drop down section but use only the Initials in the "tag like" section. See the attached manually modified image.

Hi,
As I can trigger an event when something of a "Standard Select" is selected and know the item that was selected.

Is there any on-select = "function ($ item)" event

I am working on a project where we are trying to use chosen for a filter drop down. We have the list set up and are sucessfully pulling data to the list box. However, when we implement chosen we can still see the data in the DOM but we get nothing in the chosen list. Is anyone familiar with this? Is this a possible bug or am I just doing something wrong?

in my project im using angular-chose. For me ng-opions doesnt display anything....

My code is...

     <select chosen
     option="colleges"
     ng-model="colleges.name"
     ng-options="f._id as f
     for f in colleges"
     class="form-control">
     </select>

here, data in (ng-options) colleges has displayed good. but in dropdown list, it shows only search text box without any data.

It works fine with statically given option values like in below code:

     <select chosen options="colleges" ng-model="college.name" ng-options="f.name as f.name for f in college" class="form-control" >
     <option value="clg1">college1</option>
     <option value="clg2">college2</option>
     <option value="clg3">college3</option>etc..
     </select>

Thanks in advance.

Hi, I am using angular chosen for one of my project. There is a selection box where I got few products I am displaying with chosen Select plugin, they can be searched by name at the moment. But I need it to work with productId as well. So what I need is to be able to search the product by name as well as Id. Is it possible to achieve that using this directive.

Let say my product object looks like this

[
{
"productId": 11,
"name": "Bananas"
},
{
"productId": 22,
"name": "oranges"
}
]

Please have a look thanks.

Is there a way to have the chosen options unsorted?

I'm currently using this to have the user select the days of the week, he must be able to set it wedn, thurs, friday, saturday, sunday, monday, tuesday, setting the binded property [4, 5, 6, 1, 2, 3], but when chosing wednesday, then sunday, it orders it sundat, wednesday ([1, 4] instead of [4,1])

Thanks

in a multiple selection list if ng-model is initialized, the component does not load the starting value found in the ng-model

Hi guys, I have a little problem, everytime I update the data list in my controller is doesnt reflect the change in frontend, im doing this.

In this function I just want to remove an item in a list if its added in the table, but the change is not 'working'

$scope.checkNoNormasDerogadaReglamentada = function (id_norma, listaDatos) {
        var count = listaDatos.length;

        for (var i = 0; i < count; i++)
        {
            if (id_norma == listaDatos[i].Id)
            {
                listaDatos.splice(i, 1);
                break;
            }
        }
    }

I did this but it doesnt work

$('select[chosen]').trigger('chosen:updated');

This is my Html

<select chosen options="listaNormasAll" class="form-control" ng-model="norma.reglamentaNorma" ng-options="item as item.Nombre for item in listaNormasAll">
                                <option value="">---</option>
                            </select>

Great work on this plugin - are you planning to release it under an open-source license? We're hoping to integrate it in a project we're working on.

Hi, I am trying to get a select all button to work in chosen module. Is there an option in your library to do it easy way.
At the moment im trying to modify DOM myself but it doesn't seems to work. when I select the item from list it doesn't reflect the changes I made in input select box. can you please have a look into it.

Thanks
Yasir

Description

In the scenario where the list is asynchronously loaded, and this loading takes 'too long', the dropdown will stay empty.

What seems to happen is this:
During pageload the dropdown gets initialized with the (still empty) html select list. When the dropdown items eventually arrive from the server, we'll populate the list on the Angular viewmodel, which in turn modifies the (hidden) html select list options. However, this change is not picked up by the Chosen dropdown.

Work-around (sort of)

A manual refresh after populating the Angular viewmodel works:
setTimeout(function() { $('#dropdown').trigger('chosen:updated'); }, 50);
...but this goes against the Angular model driven design. You would need to insert view-specific code into the controller which is ugly. On top of that, an artificial delay is needed in order to allow Angular apply the viewmodel changes to the DOM.

Reproduction

This can be easily reproduced on your own example page when using Google Chrome with network throttling enabled in the Developer Tools (eg. use the "Regular 2G" profile). Refresh the page, and all dropdowns will stay empty.

Hi,
I noticed that there is also leocaseiro/angular-chosen.
To make it easier for users to picker the library best for their use case, it would be helpful if you can add a section that exaplains the relation or differences of the libraries to the README.

thanks a lot :)

TypeError: iElm.chosen is not a function

Hi aditya,

Good work man. I have a little issue can you please guide. I can see in the library you got a function that can be called on no result but do have any thing that set text when there are no results. By default you can do this in standard chosen module but it wont work in your angular version of module.

$(".chosen-select").chosen({no_results_text: "Oops, nothing found!"});

Thanks
Yasir

Hi,
for a strange reason every time I run grunt serve me away Tags:

 <!-- bower:css -->
        <link rel="stylesheet" href="bower_components/chosen/chosen.min.css"/>
 <!-- endbower -->
...
<!-- bower:js -->
<script src="bower_components/chosen/chosen.jquery.min.js"></script>
<script src="bower_components/angular-chosen-js/angular-chosen.js"></script>
<!-- endbower -->

open any solution for this?

do there exit any api to set placeholder?
Such as：
Thx

First off, love the directive! Trying to use it inside of 'uib-tabset' and it appears to break. For example:

<select chosen class="form-control" data-placeholder="timezone" ng-model="student.timezone" ng-options="name for name in timezones" ng-change="update()">
    <option value=""></option>
</select>
<uib-tabset>
    <uib-tab heading="Timezones> Timezone content </uib-tab>
</uib-tabset>

This shows the angular-chosen select perfect and has a tabset beneath it. However, if I move the chosen into the tab content, the chosen stops working (ie, it just shows an empty select). Like so:

<uib-tabset>
    <uib-tab heading="Timezones> Timezone content 
        <select chosen class="form-control" data-placeholder="timezone" ng-model="student.timezone" ng-options="name for name in timezones" ng-change="update()">
            <option value=""></option>
        </select>
    </uib-tab>
</uib-tabset>

At first I thought it might not like nested directives, but I have several other directives that work fine within uib-tabset. If you had any thoughts, that'd be greatly appreciated and if you can point me in the right direction, I'm happy to take a crack at it myself.
Thanks!

I am getting this error when I enter search key

chosen.jquery.js?t=1:386 Uncaught TypeError: this.results_search is not a function(…)AbstractChosen.keyup_checker @ chosen.jquery.js?t=1:386(anonymous function) @ chosen.jquery.js?t=1:601dispatch @ jquery.min.js:4r.handle @ jquery.min.js:4

my code is
js:
$scope.libraries = [
{id: "1", label: "Label 1"},
{id: "2", label: "Label 2"},
{id: "3", label: "Label 3"},
{id: "4", label: "Label 4"}
];
$scope.selectedLibraries = [];
html:

['angular.chosen'] added as a dependency in the module.

chosen.jquery.js
chosen.css
angular-chosen.js

these files added

RT. It will be error when I inject angular.chosen, but angular-chosen is fine.

Because of my business, I am changing (removing one option) the array of options when the select it's already initialized. This does not refresh the view, until I click in another option.

Do you know what may be going on? Here's my code:

Controller:

$scope.users = [];
$scope.myOptions= [ { "id":"1", "name":"Fernando" } , { "id":"2", "name":"Gerardo" } ];

$scope.onClick = function() {
    $scope.myOptions.splice(1,1); //I am harcoding the code, so it's easier to read.
};

HTML:

<select multiple chosen
      class="chosen-select"
      ng-model="users"
      ng-options="{ id: opt.id } as opt.name for opt in myOptions track by opt.id">
      <option value=""></option>
</select>

hi.
tnx for nice work.
i have a problem:
i want to add edit button to each row (option) and add New button (for insert option) to bellow chosen-drop.
and when user clicked each button, trigger a function in angular controller.

Awesome module, very simple to use. One question, is it possible to use the allow-single-deselect feature using your module? I've tried a few different ideas, but none work:

<select ng-model="selectedPartialCategory" chosen options="partialCategories" ng-options="item as item.name for item in partialCategories" data-placeholder="Select a partial category..." allow-single-deselect><option value=""></option></select>

<select ng-model="selectedPartialCategory" chosen options="partialCategories" ng-options="item as item.name for item in partialCategories" data-placeholder="Select a partial category..." allow-single-deselect="true"><option value=""></option></select>

bower invalid-meta angular-chosen-js is missing "main" entry in bower.json
bower invalid-meta angular-chosen-js is missing "ignore" entry in bower.json

The change event is being triggered all time and not only when select/unselect an option.

e.g the problem is that when I change object.options, but the view don't change at all.

Hi, is there any way to put the stylish select Bootstrap?

I Cannot find this lib on bower. Could you add support for it?

Hi,

I get the above error in my angular MEAN project. Have installed via bower and included dependency:

,'public/lib/angular-chosen-js/angular-chosen.min.js'

and

,'angular.chosen'

Can you advise?

Is it possible to use this with an http request for lookups?

Hi, I like this pluging and trying to use it but I have a little issue. It does display data right and user can make selection which binds to angular model as well. But if I have lets say a form which is prefilled with default multiple values, then it doesn't work. I have tried something like this.

and im my controller I got this array

$scope.arrayListDays = [
{
"name": "Sunday",
"abbr": "Sun"
},
{
"name": "Monday",
"abbr": "Mon"
},
{
"name": "Tuesday",
"abbr": "Tue"
},
{
"name": "Wednesday",
"abbr": "Wed"
},
{
"name": "Thursday",
"abbr": "Thu"
},
{
"name": "Friday",
"abbr": "Fri"
},
{
"name": "Saturday",
"abbr": "Sat"
}
];

$scope.defaultListSelected = scope.arrayListDays[3];

with single select it does fine but when i supply multiple in select box it doesn't prefilled anything. Can you please have a look.
Thanks

Code used in the Index.html:
<select chosen options="countries" data-placeholder="Choose a Country..." data-ng-model="country.selected" data-ng-options="country.text for country in countries" data-ng-show="showEditProfile"></select>

The Steps followed:

1. Files included as per the article
2. ['angular.chosen'] added as a dependency in the module.

The countries list is populated from the WebAPI and its working fine till now. I am not able to get the search box, could you please help.

Browsers used:

1. Chrome
2. IE-11
3. Firefox