I have an ng-grid that utilizes the showSelectionCheckbox: true property with a custom checkboxCellTemplate.
If I remove checkboxCellTemplate I get the functionality I want where only one checkbox can be clicked at a time and clicking another checkbox will remove the selection from the previous one.
I need the template to call a specific function so my question comes down to what property to I have to pass in the template so it can be aware of the multiselect property?
The plunker can be found at http://plnkr.co/edit/nULoI4?p=preview.
So to clarify you're wondering if you can get all the values that are selected when you call a function? Don't you already have this setup in the $scope.selections. You could pass this in the function of the template by doing something like this ng-click="getDeliveryLocation({{selections}})".
Another thought is that you use afterSelectionChange:function(){} and add in whatever you need instead of the ng-click on the checkmarks. This will remove some of the odd issues you have between the different selects.
Related
I have a gist demonstrating my problem here:
https://gist.run/?id=e2ccd5925e383f2fc36ad277c31bcf23
The checkbox version works fine, if you remove a check, it updates the model right, but if you change the selected radio button, it will keep the true value on the radio that got it's selection removed. If I remove the model.bind="true" value, it will write "on" instead of true. I do want true/false, and not on/off.
I want the object to get it's property updated to be a true or false depending on if it's chosen or not, dynamically. In my scenario I don't know how many radio buttons or checkboxes will need to be selected. I only know that in the cases of it not being a collection, I only want one, and in the case that it is a collection, I want an unknown number selected.
Like the other answer mentions - <input type="checkbox"> behavior is different from <input type="radio">.
I have forked your gist and made the following changes to make your scenario with the radio button work in aurelia:
1) Added a function to the first object in your params collection called selectedChanged(it doesn't have to be there, could be on the viewmodel class instead, perhaps a better place for it). It is responsible for handling selection change in the radio button group, specifically it will iterate over a collection of options (second parameter), and set selected property to true on the option who's id matches the first parameter of the function, and to false on all other options.
2) There is an event on the input called change, I delegate it to a function called selectedChanged mentioned above, passing the option.id value and options as parameters.
https://gist.run/?id=5f38414fde799dfc145fc1291d9f2fd3&sha=f12283b08bfb45e77b8280d46a3709b6ccb82768
I think what you want to achieve (turning individual value on/off) is not achievable with radio, as the way it works (select a single value out of a set) is different with check-box (turning individual value on/off) (MDN reference). So If you truly want to have radio like appearance, with check-box behavior, consider employing some CSS and extra DOM elements to make it look like so, and behave like so.
That's my grid
<div
ui-grid="myAPI.myGrid"
ui-grid-pinning
ui-grid-pagination
ui-grid-resize-columns
class="gridMid">
</div>
How can I detect "myAPI.myGrid" within the grid?
(Click on row/column/cell/button/whatever/.. should e.g. alert "myAPI.myGrid")
The value of the ui-grid directive attribute is called gridOptions, you can retrieve the options property straight from the grid object: grid.options.
You can use the grid object in your custom templates flawlessly, just refer to it, as explained in the tutorial:
In the cellTemplate you have access to grid, row and column, which
allows you to write any of a range of functions.
So just calling grid.options inside your template should do it, and if you need to get the data array just go with grid.options.data
If you need to get a reference to the grid object elsewhere you can get it from your gridApi objects (look here for more info about gridApi) simply with gridApi.grid
EDIT: Added plunker and clarification.
I've built a plunker where I pass the object to a clickFn inside of the controller's scope, just need to click on any cell in the last column.
Beware that when I talked about the grid's name in my comment to your question, I was quite inaccurate: there is no concept like a grid name, but, as I said before in this answer, what you called myApi.myGrid is just a reference to an object, so you can only pass/retrieve that object, not the name you gave to that reference.
I guess this is not a problem, since what you will eventually need is the object. If you want to inspect it, just place a breakpoint inside clickFn in my plunkr.
EDIT: Added new plunker
I created a new plunkr where clickFn function behaves like a "Delete" button.
Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:
<button ng-click = "someFunctionInTheScope()">
For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:
<button ng-click= "someFunctionInTheScope(1)">
Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.
Therefore I need to find a more clever way of changing the template dynamically once and for each control.
So I thought about having something like
<button ng-click= "someFunctionInTheScope($select.id)">
but when I debug it I see that functions parameter is undefined, every time it is clicked.
Can somebody please show me how to hack this?
There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.
A little more context and I can provide a more specific answer.
To check the validity of a form in my page, I test this property in my controller's scope:
$scope.formName.$valid
The problem is that when I add forms dynamically to the page (based on a model property), the $scope.newFormName property is not added to the scope.
This plnkr illustrate the problem
Click the 'Add form' button to add forms to the page
Click the 'Search forms' to update the list with the forms found in the $scope
Note that the added forms are not found in the scope
Is there any way to make this work? How can I check the validity of this dynamically added forms?
So your code adds a list of identical forms. And you want to see whether this list is valid or not.
The solution is to use ngForms within a parent form. See this Plunkr (my modified version of yours).
Form input values are bound to objects in the $scope.dynamicData array, which also is used by ngRepeat to create the list of forms.
Invalid fields are shown with a solid red border, and invalid forms have a dashed red border.
When forms are nested like this, the parent form is invalid when any of its child forms are invalid.
I'd use angular.element(). I would also personally get it via ID rather than name, but that is just me. View this plunker to see what I did: http://plnkr.co/edit/b87HJt
I'm using angular.element() to get the element by the name, getElementsByName and then using the $attr directive to get at the name.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.