I have an app where I display callback results in a table.
I'm trying to figure out how to highlight a row that I click on when I display details for that record.
I thought it might be possible using the $event method and applying a class change based on a property returned there.
Any suggestions would be great!
You could use the ngClass directive on the row to set a class depending upon the value of a scope variable. Then use ngClick on the row to set the value of that scope variable.
<tr ng-class="{'highlight':activeRow===0 }" ng-click="rowClick(0)">
I have created a fiddle here
Related
I have a table made out of div tags with an ng-repeat to populate the divs from an array. I want to be able to make one of the div options an editable dropdown where the default option is a value stored from the array and the rest of the elements are loaded from another array. When a user selects an element from the drop down, the default option is then changed to whatever they selected. Does anything exist for this?
Try select2 dropdown.I have added a plunkr of the same.
https://embed.plnkr.co/umVG1tVdYJXbrKt0E70Q/
You can use angular ui-select directive
In my application I have created paper element using dom-repeat to create below div. I have used data binding approach to bind property value to one place.same as below eq.
<div class="card-content" on-click="changed">Number of votes <span class="votes">[[count]]</span>
on-click event I want to change value of count property only at specific div, but as per data binding rules it's getting updated all places.
Please let me know if their is any way by which I can update value at single place without modifying other place.
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.
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.
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.