I'm creating a combobox directive to replace select boxes. Its working pretty well when I only have one select box on a page, but I'm having trouble once I have more than one on a page. Triggering anything that opens the dropdown of the combobox opens up ALL the comboboxes on the page. When I commented out the watch on the page, it starts working as expected. The problem is that I can't figure out why the watch would be triggering outside the scope. I thought that an isolate scope meant its local only to that directive?
The combobox code: http://pastebin.com/MWvXwUdf
Combobox template: http://pastebin.com/DQp0q1Dd
(I'll setup a jsfiddle or plnkr tonight)
How the combobox is called:
<combobox data="levels" value="cb_value" search="data.level" strict></combobox>
Where data is what gets populated in the dropdown, search is what goes in the search input, and value is what is the returned value.
Related
I'm using ngx-chips to create a tag input for Angular 8. I got it all to work but I would like for my input to show the dropdown whenever I focus on the tag. Currently it only shows the dropdown when I focus on the input part, which is pretty small:
I want the dropdown to show when I click anywhere on the form, like this:
Is this behavior possible? I also noticed that pressing Enter can show the dropdown, but trying to trigger that behavior on click isn't really working out.
I tried altering the CSS itself by increasing the input width, but it looks and feels weird to use. So instead, I created a workaround with jQuery.
I just created a function for the component that uses ngx-chips, and used some jQuery inside that function
showDropdown() {
$('.ng2-tag-input__text-input').click();
}
Since the dropdown appears when focusing on the tag input field, what this snippet does is exactly that, but I used this function on an outer div, so that it would seem like when you click on the whole form, the dropdown would still appear.
Hope this would help someone else as well.
I have an application wherein when i click on edit button it pops up a bootstrap modal where I can edit the data. But the problem is when i change any data in the bootstrap modal, the data in the list also gets changed. Strange thing here is both the scope variable for modal edit data and the scope varaible associated with the data in the page is different.
This issue can be visualized using the below URL:
http://angularjs.mostlikers.com/curd-operation/
Click on the Edit button and try to change the modal data, it also changes the data in the table which should not be the ideal case until submit is clicked.
Any help would be appreciated, since stuck for a long time.
You should clone the row object when sending it into modal, You can use lodash.js library for that like below
//When binding row to the modal's scope you should do this,
$scope.user = _.merge({},row)
Assuming that $scope is the modal's scope and row variable in the object for that row which is to be edited.
Thanks for your time.. My trouble has been something I am unable to resolve. Hence this post.. I have an <asp:DropDownList> which is data bound in the code-behind. Everything is working with exception to the actual drop down list of items only rendering on the first click of the control. If I click outside of the control, the items/dropdown collapses and I can reclick the control to rereveal the items. However, if I select an item, any subsequent clicks on the control do not result in the rendering of the dropdown/items. I am so stumped here. What am I missing? Thanks..
I have used custom formatter and editor in slickgrid, which is simply checkbox angular directive. I am using twice the directive, once for formatter, and once for editor. Formatter and Editors are served from angular service. Slickgrid itself is wrapped into an angular directive.
Editors are implemented according to slickgrid doc Writing custom editors
The slickgrid directive is used in several places. One scenario, which I am struggling with, is when there is a grid, and there are buttons outside of grid.
When one clicks one of this button, I have to get the values from cells/editors.
When grid is rendered, once sees checkbox. it is checked/unchecked based on current value of a cell where this formatter is used.
And when one clicked on a cell with checkbox, the checkbox changes from unchecked to checked or vice versa. And then one clickes somewhere else in the grid in the value of editor checkbox copied to cell, and then formatter shows checked/unchecked.
Back to my scenario: when one checkes/unchecks checkbox in editor mode, and directly clickes one of the buttons outside grid, the value of editor is not applied yet to cell, thus the wrong value is send. While we are still in editor mode, and value is not committed.
Now the question, how to commit changes to cell right after the value of checkbox is changed dynamically without waiting for slickgrid to change from editor mode to formatter mode?
Found this question relative, but my environment is not the same.
I found that editor takes args argument which has commitChanges() method, but how to use it?
Best
I have tried a lot of methods of slickgrid, but did not find a better solution but this.
Inside my custom Editor constructor, I have added a watcher that watches changes to checked attribute of Checkbox directive.
$timeout(function () {
controlScope.$watch('checked', function () {
$timeout(function() {
args.grid.getEditController().commitCurrentEdit();
args.grid.resetActiveCell();
});
});
});
The first timeout is not to break the running digest cycle, and just digest it on next run.
And the next timeout is needed to wait until angular is finished with changing scope, and only then commit changes. Otherwise the commitCurrentEdit() will kill the editor, and thus the scope of Checkbox directive.
I hope there will be a better solution.
1 EDIT: This solution brings weird behavior. The first click works good, but the next click on the same cell does not change the checkbox checked.
2 EDIT: I have added resetActiveCell() of grid to leave the focus of active cell, and now it works as I wanted.
3 EDIT: We could not find a better solution without changing the source code of Slickgrid, which is not wished. After searching alternatives and solution for the problem, we decided to use the ui.grid and it plays well with our environment , since we are using angular. And most of the problem we faced with slickgrid, is by default fixed just by using ui.grid without customization. Slickgrid is still of the best grids available for javascript developers, but it seems like it is slowing down from JavaScript progress.
Another solution to commit the change to the grid is call:
Slick.GlobalEditorLock.commitCurrentEdit();
I am using select and ng-options to show a combo box in my application.
I want to lazy load the contents of the aforementioned select using a rest call.
So, i have used ng-click to call a method when ng-click is triggered.
Problem is even if the click is on the combo-box or there's any selection in the combo box, the rest call is triggered.
How can i just bind the event when the combo-box dropdown is shown.
Below is the code snippet of what i've done.
<select ng-model="selected" ng-options="item.ID for item in beanPropertyComboItems" ng-change="onDropdownChange(selected)" ng-click="onDropdownClick(selected)"><option value=""></option></select>
More code will help! It sounds like you only want to make the REST call when the select box is first created. You can do this inside a controller or directive you have wrapped around the select. Angular has a directive called ng-init for this case as well, but it is highly recommended that you don't use it. Best practice is to initialize scope variables within controllers.
If you want to populate the select box when it is first clicked, you can add a boolean flag inside your "onDropdownClick" function to check if it has been populated yet.