Versions Compared

Key

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

...

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>

You will also need CSS to style the table flash.

Code Block
themeConfluence
languagecss
linenumberstrue
div.summary-list tr {
    transition: background-color 500ms;
}
.light div.summary-list tr.data-change {
    background-color: #FDFFDC;
}
.dark div.summary-list tr.data-change {
    background-color: #5A5600;
}
RequirementsOther AttributesSummary
  • onos-flash-changes must be on the <div> or <table> elements that represent the table body
  • include the directive ng-repeat-complete in the same element that ng-repeat is in
  • include row-id attribute with the interpolated unique identifier (see right)