john-oc / acute-select Goto Github PK

View Code? Open in Web Editor NEW

123.0 123.0 83.0 1.14 MB

Dropdown List Component for AngularJS - NO LONGER UNDER ACTIVE DEVELOPMENT

License: MIT License

C# 0.20% JavaScript 97.82% CSS 0.89% ASP 0.01% HTML 1.06% Batchfile 0.02%

acute-select's People

Contributors

Stargazers

Watchers

Forkers

cstephe bitsofalex outsource codingzeal nazan arielbouskila paulopsr keithnlarsen goranjovic alogonzac tunks wfairclough anandharshan tcdevs brandanmajeske heathhopkins medycation jaimeguaman iazi killinit spyhunter88 andrerafaelmezzalira kraftika nickgzzjr liyocee ashu17706 joshuaocero asd20338 riley2penna pkdevbox nvernooy iqms jsowndarrajan brianranney reference-project koraykoc muhamadmokhtar willianmiranda supaheckafresh mmlamari htaningcojr priyanr borgotta azubanych endpoint80 nitinsinha63 shanghaiese eugeniospolti saurabhnarula pankajtakawale krysthian kengyugrant pithiwat gck2710 ourprjdr itailulu unikneeraj ebicoglu motiur100 jbthummar gjfeng rgregorio rojahema code-hard-play-harder girijarajaram vobukay wangshujingscan marktang z1pp4 casualuser ferinder maheshparlapalli apadigal sabareesh-rs smitvadher musicalshore

acute-select's Issues

IE 7 Support

Hi John,

Great plugin it has been very useful. But I'm facing certain issues with IE -7 select box is empty. Does acute select supports Ie -7? Is there any workaround.

Thanks
Parteek

Filtering stops working if query deleted with backspace

If a search string is entered, the list is correctly filtered according to the query. However, if the backspace key is now used to delete all characters of the query text, and new text is entered, it does not work for partial matches, but if an exact match is found, it does then select that item from the options.

Test code & sample data:

<!DOCTYPE html>
<html ng-app="acuteselect">

<head>
    <title>acute-select issue</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    <script src="acute.select/acute.select.js"></script>
    <link href="acute.select/acute.select.css" rel="stylesheet" />
    <script>
        var acuteselect = angular.module("acuteselect", ['acute.select'])
            .controller("acCtrl", function ($scope, $http) {
                $scope.selected = {
                    number: null
                };
                $scope.numbers = null;
                $http.get("data.json").success(function (data) {
                    $scope.numbers = data;
                });
            });
    </script>

</head>

<body ng-controller="acCtrl">
    <ac-select ac-model='selected.number' ac-options='number.name for number in numbers'> </ac-select>

    <p>
        Model: {{selected.number}}
    </p>
</body>

</html>

data.json (I am testing with an array of 200 objects, as follows):

[
  {
    "id":1,
    "name":"one"
  },
  {
    "id":2,
    "name":"two"
  },
  {
    "id":3,
    "name":"three"
  },
........
 {
    "id":200,
    "name":"two hundred"
  }
]

Set Selected Option after load the Data

i am going to set selected option when data is loaded
how can i do that?
thank you

slows down on note 3 phone

I got everything working, and on my browser awesome. On a phone, there is a many seconds delay between touching one of the combo drop downs, and having it do something.

Does anyone have a solution, as we all know applications, particularly touch applications, must be instantly responsive.

Search text box - does not show up filtered data after first time successful search...

in the dropdown .. I am able to find data with the search text box only once.. after that it does not filter or search the data with the provided search text..whats the problem i dont understand?

ac-options function with params

Hi,
I'm trying to do something like this:

ac-options="l as l in loadData(1)"

When I'm adding a param to the function the directive isn't working, there is an option to do it?

Changing itemHeight has no effect

Hello John.

I'm using your control on my page. Thanks for it, it very nice.
I've faced the problem and want to report about it:
changing itemHeight has no effect.

I've changed itemHeight from 24 (default value) to 32 and nothing changed: controls is still displayed in the same way (I've used latest chrome).
Could you please take a look.

Best regards.
Sergei

Getting ac-model and ac-options attributes must be set error even though they are set

Here is my ac-select tag

<ac-select ac-model="selectedColour" ac-options="c.name for c in colours" ac-change="colourChanged(value)"></ac-select>

Using angular 1.2.1 with requireJS

Full error -

ac-model and ac-options attributes must be set <div class="ac-select-wrapper ng-isolate-scope" ng-keydown="keyHandler($event)" tabindex="999" ac-focus="wrapperFocus" ng-focus="comboFocus = true" ac-model="selectedColour" ac-options="c.name for c in colours" ac-change="colourChanged(value)">

Query

Hi John,

I faced some issue while implement with this plugin,

When the select box is positioned at page bottom that time it's value not auto adjusted to page top instead it's displayed with page scroll.

I am expecting this select value (list) should auto adjust to top/bottom, based on the acute-select position placed.

ac-options and ac-model attributes must be set

I am trying to get this working with my project but I am having trouble. I have copied and pasted your example code into my project and I am getting this error.

ac-options and ac-model attributes must be set

I would like to use this, currently I am using Angular-Ui typeahead directive. This is how I am using it. If you could show me how to transition I would be grateful. thank you

Here is where I am getting the jobArray
//GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) {
$scope.jobArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});

Works with arrays?

Docs mention it works with arrays. Doesn't seem to. Am I missing some trick?

Is there a way we can get the current selected value and the changed value

I am struck in a scenario where I need already selected value in the acute select and the current changed value to it. Is it possible with the acute select out of the box? That would be of great help.

Set selected item from external code

How do I set the selected item (from external code) after acute-select is already loaded?

Changing the ac-model object to the desired id & name correctly updates the display when the drop-down menu is closed.
However, once you open the drop-down menu the item is not selected/highlighted.

Support for required and name?

Is it possible to add support for name and required attribute in order to have support for angular forms validation?

Data replication

Hi
If you have the select with a list of items. If you make any dynamic changes to the page and reload the data, so the changes show on page, the items in the dropdown become replicated.
Everytime you make a save, you update the data, angular refreshes it's variables so the user has up to date info and it still replicates in the dropdown.
I've tried destroying the the array. emptying the array, everything. I can see angular is emptying it from the console, the data gets trashed and then is reloaded once. . but the dropdown is keeping a copy and just adding to it. It is rather frustrating.

Does it support Angular.js 1.3?

Hello!

Thank you for this module. It looks promising.

However, does it support Angular.js 1.3? And is it still in active development?

Thank you!

If you're using an id/name combination the model becomes the whole json object not just the model

   <div class="ac-select" ac-model="itemListing.selectedVideo.productId" ac-key="id" ac-options="p.id as p.name for p in productListing.products" data-ac-settings="{ loadOnOpen: true, minWidth: '300px' }"></div>

                                {{ itemListing.selectedVideo.productId }}

If I set this up and trying an output itemListing.selectedVideo.productId it will return the entirety of the selectedVideo object not just the productId

I've tried using ac-key with the same result..

There is the error when comprising it

Hi
When comprised it, there is an error called Unknown provider: acSelectDirective, it is due to the way you write the directives, like .directive("acSelect", function($parse, acuteSelectService) {}), could you please change it to .directive("acSelect", ['$parse', 'acuteSelectService', function($parse, acuteSelectService) {}) for solving this problem?

Multi-select

Is multi-select on the roadmap ? Like ui-select2 ...

Page becomes empty when acute.select module included

My page is working just fine and it becomes empty when I include the acute.select module.
No errors in the Console or on the Net tab.

Stops filtering if erroneous values are entered in comboMode

While in comboMode, if you type a value not listed, the drop down list will filter until it reaches a value that does not exist. Then you can not retrieve the full list, only what the last known good filter was. Also, if you filter down to a known value but don't select it, but instead, blur and focus on another element, it will not reset the filtered list, again it will only show the last known good filtered list (not the whole list). And yes this includes deleting what is in the input box.

How do you use acRefresh?

I want to trigger it when I have a new value of null so the drop down goes back to the watermark.

What is the syntax?

from what I see in acute-select.js
It looks like it does this, but it is not mentioned in the documentation.

placeholder and watermark should change for each drop down

apparently it is, just not in your list of settings that I looked at. It can be set with placeholder:"xxx" in the options.

inconsistent model value being set

Absolutely appreciate the hard work you have put in the directive and after the last commit I noticed there being an inconsistency when using the AS keyword indicating which value to be set in the model attached to that directive.

http://plnkr.co/edit/ExHCtS5Ttt7v3XsmmlFZ?p=preview

If you keep an eye on the console you will notice the first time selecting a value it properly assigns a value referencing AS (in this case $scope.selected = 0) but after that the directive just sets whatever value you select as the new model value (it doesn't use the AS keyword)

loadOnOpen gets reset to false

The control specific flag loadOnOpen gets reset to false after first use 'to avoid re-loading data'. However in many cases (mine included) the option data may well have changed by the next time it is used.

This behaviour should be controlled by a new option I would suggest.

Select multiple values from ac-options

I'm wondering if it is possible to show for example the first name and the last name inside the the dropdown.

I have tried this : ac-options="s.firstName + ' ' +s.lastName for s in getAllUsers()"

But it only shows the last name.

Updating model doesn't update items in drop dwon

Doesn't seem like if I change the model, the drop down items get updated?

Data Functions with parameters

I am using a data function which takes parameters (it is a very tabular application). For example the ng-options would look something like this (very simplified)

ac-options="option.Value as option.Value for option in getOptions(line,column)"

I think from looking through the code, this will fail to match as a data function as it's looking for '()'. Thus the loadOnCreate flag never comes into it and the expression is evaluated on create regardless. As I have upwards of a thousand of these elements my application basically just parks until it has consumed all the memory available, and then dies.

There should be a more intelligent determination of when the data source is a function, e.g. match on a regexp for '(.*)' maybe?

There is a bower package for this repository?

Dropdown popup opening twice

Hi John,

Whenever I expand the dropdown it seems to be opening twice. I'm using angularjs version 1.3.3.

access custom text with allowCustomText

Hi,

I understand that with

 comboMode: true, allowCustomText: true

it is possible to allow for free text. Unfortunatly this text appears in the search box but not in the model. Its always the last selected option in the model and not the entered custom text...

I tried as well ac-change, but that is only triggered when you select an option as well...

Thanks for your help!
Martin

Drop down not populated when provide data thourgh promise

When i provide data by using promise, dropdown does not get populated. here is my code

ContactDBService.select().then(function (result) {
$scope.colours = [
{ name: 'black', id: 0 },
{ name: 'white', id: 1 },
{ name: 'red', id: 2 }];

});

Please provide solution if im missing some thing

ac-options filter doesn't work

hello John,

I am trying to populate ac-select and based on value from another select but getting the following error:
**Syntax Error: Token '}' is an unexpected token at column 7 of the expression [allCat}] starting at [}].**
I also tried using java-script function in ac-option: s.Item for s in getSelctedItems(Items, allCat). but I get error on this as well.

my Items is something like this:

{ "Color": "red", "Cat":"Tiger", "population":100},
{ "Color": "green", "Cat":"Lion", "population":200},
{ "Color": "red", "Cat":"house cat", "population":100}

cats array:

{"cat":"Tiger", "name":"Indian Tiger"},
{"cat":"Lion", "name":"African Lion"},
{"cat":"house cat", "name": "Katt"}

Wondering if this feature is supported. Any insight on this would be very helpful. Thank you for your time.

<select name="allCats" ng-model="allCat">
                        <option value="" selected="selected">All</option>
                        <option ng-repeat="cat in Cats | orderBy: cat.name">{{cat.cat}}</option>
</select>
<select class="ac-select" ac-model="Items" 
ac-options="s.Color for s in Items | filter: {s.Cat : allCat}"
ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '170px' }" ac-change="itemSelected(value)"></select>

is there a way to use Template ?

Using Angular v1.4.7, no data visible in drop downs

When using this with Angular v1.4.7 I get the following error:

Error: [filter:notarray] Expected array but received: 0
http://errors.angularjs.org/1.4.7/filter/notarray?p0=0
at http://localhost:49751/lib/angular.js:68:12
at http://localhost:49751/lib/angular.js:18391:31
at fn (eval at (http://localhost:49751/lib/angular.js:13322:15), :4:254)
at trackByIdExpFn (http://localhost:49751/lib/angular.js:27340:20)
at ngRepeatAction (http://localhost:49751/lib/angular.js:27397:25)
at Object.$watchCollectionAction as fn
at Scope.$digest (http://localhost:49751/lib/angular.js:15826:29)
at Scope.$apply (http://localhost:49751/lib/angular.js:16097:24)
at done (http://localhost:49751/lib/angular.js:10546:47)
at completeRequest (http://localhost:49751/lib/angular.js:10744:7)

Using your sample project as is, I did not get the error. The project I am working uses the most recent version of Angular. When I changed the sample project's "~/test-pages/TestAcuteSelect.htm" line 13 from
<script type="text/javascript" src="../lib/angular.1.2.26.js"></script>
to
<script type="text/javascript" src="../lib/angular.js"></script>
where angular.js is the most recent version (v1.4.7), I receive the error in the sample project. Once this error has occurred the drop downs do not have any data visible in the drop downs. If you start typing a state name, such as Alabama in a select box with combo mode as true, you can see that it limits the search results and appears as if data is there, just with no visible text.

Any help would be greatly appreciated as this control is perfect for what I'm trying to do. Thanks!

Template for directive 'acSelect' must have exactly one root element. /acute.select/acute.select.htm

I am getting this error , and i really need to use the ac-key feature of this plugin, please reply

Include setup instructions in README

I know this is a simple thing but it would be nice to have a setup instructions in README for people who are new to angular (read myself).

How to disable select control?

Is there an example on how to disable select control?

ac-model returns old value after ac-change runs ?

the model is updated after ac-change runs !!
I don't know how to fix it?

Setting templatePath

I put acute-select dir in /static/ folder:

<ac-select ac-model="criteria.account" ac-options="a.name for a in allAccounts"
                  ac-settings='{ "templatePath": "/static/acute.select/" }'></ac-select>

But template is not loading:
Internal error: http://127.0.0.1:5000/acute.select/acute.select.htm

loading a second dropdown dynamically

I have 2 dropdowns. The first one is loaded by a Json object when the page initiates. The second one should load from different Json objects depending on the first dropdown selection. I am changing the second dropdown model based on the first dropdown selection, but the dropdown does not get loaded.
How do I dynamically load the dropdowns?

Using ajax it is not working...

var url = 'http://some url';

someService.getStrategiesForCampaign(url).then(function (result) {
$scope.color = result.data.data.slice(0,15);
});

This is not working with ajax kind of stuff.

Am I doing any thing wrong

IE9 support

@john-oc
I can't get this to work in IE9, it only works in Chrome/Firefox (latest versions).I don't see the dropdown list. I have used the files described in the getting starting guide. I only have a plnkr, but I used the same code locally to test it out.

What do I need to do, to make this work?

Example code.

Thanks for this plugin

p.s. the demo (of this project: acute-select) works in IE9 (though there are some errors) but the latest source code (from this repo) not

view doesn't change when updating model...

How can i make view change accordingly when updating model of scope?

Quick Start Instructions. Can't make this work.

Dear John,

Would you mind provide me guidance on how to use this library?

I imported the acute.select css and js in my index file but when I create the markup nothing happens! I get an empty select box without even style applied!

Could you please write a step by step on what to import and how to make it work? Also do I have to load an angular module in my app? like `var app = angular.module('ResourceCenter', ['ngRoute','ngAnimate','ngSanitize', 'acute-select']); ??

ac-change runs before model is updated?

ac-change seems to run before the model is updated.

Angular's ng-change runs after model update..

Doesn't it make sense to do the same as angular?

ControllerAs

Any chance that this will be updated to handle the new controller aliasing in addition to $scope?

john-oc / acute-select Goto Github PK

acute-select's People

Contributors

Stargazers

Watchers

Forkers

acute-select's Issues

Recommend Projects

Recommend Topics

Recommend Org