Versions Compared

Old Version 7

changes.mady.by.user Bri Prebilic Cole

Saved on

compared with

New Version 8

changes.mady.by.user Bri Prebilic Cole

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

RequirementsOther AttributesSummary
  • onos-sortable-header has to be on an element that has children that represent the table header row (<td> elements)
    • in the above example, the directive is on the <div>, but it would also work on the <table> or <tr> elements
  • the <td> elements you want to be sortable must have the sortable and the colId attributes (see right -->)
  • ALL column headers must be <td> elements NOT <th>

sortable - (required) put this attribute (with no value) on the td element whose column you want to be sortable.

colId - (required) this attribute's value must be the tag of the column's contents which you want to sort by. As shown above, to sort by ID, the attribute must be colId="id"

** If you don't include these attributes, then the column won't be sortable. **

This directive selects all of the <td> elements below the onos-sortable-header attribute and checks if they have the sortable attribute. If it does, then it installs a sort click event on the <td> element.

 

onos-flash-changes

Flashes the table rows whose information is new or updated.

Example Usage

Code Block
themeConfluence
languagexml
linenumberstrue
<div class="summary-list">
	<div>
		<table>
			<tr>
				<td>ID</td>
				<td>Foo</td>
				<td>Bar</td>
				<td>Baz</td>
			</tr>
		</table>
	</div>
	<div>
		<table onos-flash-changes id-prop="id">
			<tr ng-repeat="item in tableData track by $index"
				ng-repeat-complete row-id="{{item.id}}">
				<td>{{item.id}}</td>
				<td>{{item.foo}}</td>
				<td>{{item.bar}}</td>
				<td>{{item.baz}}</td>
			</tr>
		</table>
	</div>
</div>