I'm trying to implement AngularJS + Select2 with Multiple selection enabled.
When I include the full angular-ui package, it works, however I do not want to use the full version.
So, I tried to do the same, but just including the ui-select2 module itself and I got surprised that the initSelection does not works this way.
I have prepared 2 Plunker's to illustrate both tries, the first, that does not work, shows the include of only ui-select2 module and the second example, that works, includes the full angular-ui package.
1º Example (does not work)
http://plnkr.co/edit/YOrzQKGx3py24Lf3JQ2Z?p=preview
2º Example (works)
http://plnkr.co/edit/ZeYgJyLHo30hTi2DerJZ?p=preview
Click on the 'set selected' button, below the select2.
After dealing with this for about 12 hours I'm stuck.
Would any angularjs+angular-ui Guru knows what is going on here?
I need to make this work with only ui-select2.js, so I need the Example 1 working.
Any ideas?
Thank you very much.
Related
I am trying to make each value in one of the column of table as clickable so that I can develop drill down functionality using Zeppelin Table. But following sample code is not working at all.
print(s"""%table
a\tb\n%html <button>x</button>1\t2\n%html <button>y</button>3\t4
""")
It will take quite some effort to make this work.
The basic idea is converting a data source (e.g. Spark DataFrame) to a complete and self contained HTML section and which is interpreted by Zeppelin. Hide and show need to be handled by javascript library.
Zeppelin using Bootstrap, so we shall use bootstrap library directly. This SO might help Bootstrap cllapse. Perhaps need more styling.
If you are just wanna drilldown function while not strictly with table. And if you are using Spark, it might be a bit easy with spark-highcharts to implement the feature like Highcharts column drill down
Finally my code worked. The issue seems to be if you have html tag in the first column, it will not work. However, it works in all the other columns. Just add one more cols in the front and it worked.
print(s"""%table
dummy\ta\tb\np1\t%html <button>x</button>1\t2\np1\t%html <button>y</button>3\t4
""")
I've been trying to upgrade our ng-Table code to either .083 as well as 1.0.0 but keep getting the same problem. Basically my goal is in certain situations to specifically set the page of my table to a specific page instead of defaulting to page 1.
An example would be if I was on page 3 and clicked on a table item which would take me to another partial page and I wanted to return to the same place in the table (ie: page 3 instead of 1).
When I evaluate the condition I merely set the page with the following line of code:
params.page(3)
As soon as this code executes it doesn't error (in the console) but my table will no longer page using my custom pager. It does really weird things like jumps pages as well as the data does not change in the grid. Sometimes my pager prev/next buttons disappear altogether or they jump from page 2 to 4. This same code worked flawlessly when using ng-table 0.4.1 and prior. I've looked everywhere but don't see anyone else with this problem. I've seen tons of examples where someone desires to do this but not in the newer versions of ng-table 0.8.3 forward.
Below is a simple example (with extra code removed to simplify my example).
I have no idea what is wrong in the simple code i have written to select a value from the dropdown. I have been watching other tutorials and code samples and i dont find any mistake in my code. Could someone please help me? I have tried running my code in Chrome as well as Mozilla(on two different OS) but still the issue exists.I am posting attachment of the html as well as selenium code.
Also, i am sure the problem is not because i have used wait because even if i comment that line or use it after loading the web page, the issue is there.
HTML
Selenium
Why don't you try clicking on the dropdown and then selecting the value.
tp.click();
and then
Select dropdown = new Select(tp);
dropdown.selectByValue("2");
new Select (driver.findElement(By.id("custtitle"))).selectByValue("2");
OR
new Select(driver.findElement(By.id("custtitle"))).selectByVisibleText("Mrs.");
Im trying to look up to see if UISelect(multiple) provides a feature to drag move items within the control to sort the list ?
I tried googling for the same and couldn't find much information on this.
Appreciate if you can provide link to some kind of documentation so that i can start from there.
NOTE : I fairly understand how UISelect works.
Just for reference: There has been added a sortable="true" option in v0.10. However this feature is not yet properly documented, but for further information, see this github issue or demo-multi-select.html in the examples folder.
It uses the ui-select-match directive as the "template" inside an ng-repeat that generates them.
Unfortunately that ng-repeat, unlike ui-select-choices's repeat parameter is hardcoded inside ui-select's directive templates.
Look at this template: https://github.com/angular-ui/ui-select/blob/master/src/select2/match-multiple.tpl.html
In the build version of ui-select it's inlined using $templateCache, thus you can easily replace it with your own version and apply sorting on that ng-repeat="$item in $select.selected".
You could also integrate something like ngDraggable there.
The main issue here would be CSS though and absolute positioning used.
I'm trying to create an NG app where parts can be enabled/disabled dynamically. The idea is to have an "admin" page, where parts of the app can be enabled or disabled, and then see new functionality appear, in the form of an adjusted menu at the top of the page, and matching routes, controllers, etc loaded into the app (I'm using SocketStream w/ NG).
The first step was to add / remove routes dynamically, for which I found a solution at https://stackoverflow.com/a/13173667 - working well, as far as I can tell.
Next, adding items to the menu bar - easy with ng-repeat on ul/li items.
So the app adjusts its menu and recognizes the corresponding route. So far so good.
The problem comes with registering a controller. I'm calling myApp.controller('SandboxCtrl',[...]) with proper args (same as what worked when initialising statically on startup), but the controller does not appear to get loaded or inited properly. Navigating to the newly added route generates errors such as:
Error: Argument 'SandboxCtrl' is not a function, got undefined
assertArg#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:973
assertArgFn#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:984
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:4638
update#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:14007
$broadcast#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:8098
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7258
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6695
$eval#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7848
$digest#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7713
$apply#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7934
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:5433
I'm currently at a loss on how to proceed. I've not been able to find a solution on the web. The app is too large to put in a jsFiddle, but I can commit the last changes on GitHub if needed.
Questions: is this feasible? what can I do to debug this? any examples I could look at?
EDIT: The code is now at https://github.com/jcw/housemon (needs node/npm/redis). It's easy to reproduce the problem: launch with "npm start", browse to localhost:3333, go to admin tab, click on "jcw-sandbox" and then "Install". Top menu will update with new a "Sandbox" entry. Clicking on that entry generates the error shown above.
Oh, almost forgot: relevant code is in client/code/app/main.coffee and client/code/modules/routes.coffee ...
The answer turns out to be two-fold:
the NG calls were made from SocketStream RPC callbacks, and had to be wrapped in $scope.$apply calls - my bad, didn't know about this SS/NG interaction
the rest of the solution was outlined by #matys84pl - pick up $controllerProvider (and $filterProvider) early on, so they can be called at a later time instead of the normal "app.controller" and "app.filter" members, which don't seem to work anymore later on
Example code in GitHub, I'll link to a specific commit so this answer stays valid:
https://github.com/jcw/housemon/commit/f199ff70e3000dbf57836f0cbcbb3306c31279de