Can I customize the selection in angular-ui-grid somehow?
(to be a <input type="checkbox"> instead of a selected V)
Didn't find any documentation about this...
To modify the actual row header icons:
You can override the template for the selection row header buttons and add custom class css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template uses a method in your controller scope to identify whether the row is selectable.
Sample plnkr here http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview
Related
I have a problem I have created a directive which is doing ng-repeat on an array of objects
---Showing the value on gui------
Now I want that if I click on any div of this repeat that particular div's background color should change
I have tried something like this
link:function(scope,element,attributes){
$(element).on('click',function(e){
$(element).addClass('A');
$(element).removeClass('B');
})
}
You can use the ng-class directive to apply classes on specific occurences, in your case in combination with the ng-click:
<div ng-repeat="item in items"
ng-class="{A: item.clicked, B: !item.clicked}"
ng-click="item.clicked = !item.clicked">
<!-- .. content -->
</div>
See this jsfiddle for example
You can try something like this, but this will need more workaround.
<div ng-click=“changeBackground($event)”></div>
// In Controller
$scope.changeBackground = function(event){
event.target.style.background = “#000”;
}
It would be better if you can submit your code.
In an angularjs service, I am adding the HTML for an accordion-group to the DOM of an accordion element. What results is the display of the accordion-group as if it were a panel - no title bar, no collapse behavior.
I'm sure it is because the accordion gets initialized before the content is added. The jQueryUI accordion has a refresh method for such occasions, but not sure how to get the angualrui accordion to recognize the new accordion group.
hope the following steps help :
get the reference of the element where you want to add the accordion
HTML : <div id = "myAccordion"> </div>
Controller : var parent = angular.element("#myAccordion");
Compile your accordion template and attach it to the parent
Controller: var accordion = $compile("<div accordion> </div>")($scope);
parent.append(accordion);
but this is a work around you should ideally have a directive to do DOM manipulation , perhaps you are coding with jquery in mind.
I need to use KendoUI TreeView with MVVM (declarative) binding, and I need to show checkboxes only for some nodes, based on a field in the model.
For this, I want to use checkbox template
However, whatever I do it seems I cannot make it work
Here is the fiddle with the treeview bound through MVVM but without checkbox template
What I want is to use the function checkTemplate as checkbox template, by defining the treeview as below
<div class="files"
data-role="treeview"
data-text-field="name"
data-spritecssclass-field="type"
data-checkboxes="{checkChildren: true, template: checkTemplate }"
data-bind="source: files"
data-template= "ktmpl_Files">
</div>
However, it doesn't work.
Does anyone has any idea what is wrong?
Thanks
The template function used for checkboxes is invoked in a context where your "checkTemplate" function is not visible. Define it global:
<script type="text/javascript">
function checkTemplate(e) {
return "<input type='checkbox' style='display: " + (e.item.checkable ? "inline" : "none") + "'/>";
}
</script>
Check it here: http://jsfiddle.net/OnaBai/K6cbc/5/
I just need to make a div fullscreen whenever a user clicks on that div. I know this can be done via javascript and jquery. But i want to know if there is any pure angular js method of doing it. Any suggestions in this regard would be appreciated
You can use a fullscreen directive like this ones:
https://github.com/hrajchert/angular-screenfull
https://github.com/fabiobiondi/angular-fullscreen
One way is to use ngClass to apply a fullscreen class based on a boolean scope property. And use ngClick to toggle the scope property when clicked...
<div ng-click="isFullScreen = !isFullScreen"
ng-class="{fullscreen: isFullScreen}">click me</div>
Fiddle
Making a div fullscreen is(should be) about css, so you can change your div's css class via angular like:
html
<div ng-class="{fullScreenDiv: isFullScreen}">...</div>
<div ng-click="makeFullScreen()"></div>
js
$scope.isFullScreen = false;
$scope.makeFullScreen = function(){
$scope.isFullScreen = true;
};
fullScreenDiv is css class and isFullScreen is a variable in your controller scope. Change isFullScreen variable to enable/disable full screen.
Meaining of ng-class="{fullScreenDiv: isFullScreen}" is if isFullScreen expression evaluates to true then apply fullScreenDiv css class to element.
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>