ga-panel¶
This is a main component that generates a simple gentelella panel.
Binding reference¶
panel-title
: The panel title (string)panel-subtitle
: The panel subtitle displayed in smaller font next to the title (string)panel-query
: Whether to show a small input text box usually for filtering (boolean)panel-query-string
: A controller variable to hold thepanel-query
input (variable)panel-add-record-url
: A url to direct for adding a record. If provided a + icon will be available (string)panel-query-model-options
: Additional ng-model-options to pass to the query field (object)on-query-change
: A callback function to call if query value changes (function)
Transclude¶
The component will present any content transcluded.
It also allows the optional transclude element panel-toolbar
for presenting additional buttons
(v0.2.5, see examples below).
Controller¶
The component will initiate the necessary jquery required by gentelella as well.
Code sample¶
Using simple filter¶
Template:
<ga-panel panel-title="Products"
panel-query="true"
panel-query-string="$ctrl.queryValue"
panel-add-record-url="#!/products/add">
<panel-toolbar>
<a href="" title="Some button"><i class="fa fa-modx"></i></a>
<a href="" title="And another"><i class="fa fa-random"></i></a>
</panel-toolbar>
<table class="table table-hover dataTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in $ctrl.products | filter:$ctrl.queryValue">
<th scope="row"><a href="#!/products/{{ product._id }}">{{ $index + 1 }}</a></th>
<td><a href="#!/products/{{ product._id }}">{{ product.name }}</a></td>
</tr>
</tbody>
</table>
</ga-panel>
Using callback function¶
Template:
<ga-panel panel-title="Products"
panel-query="true"
panel-query-string="$ctrl.queryValue"
panel-query-model-options="{debounce: 1000}"
on-query-change="$ctrl.filter(queryValue)"
panel-add-record-url="#!/products/add">
<table class="table table-hover dataTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in $ctrl.products">
<th scope="row"><a href="#!/products/{{ product._id }}">{{ $index + 1 }}</a></th>
<td><a href="#!/products/{{ product._id }}">{{ product.name }}</a></td>
</tr>
</tbody>
</table>
</ga-panel>