AngularJS implements display of different controls based on different conditions, and angularjs implements controls

AngularJS implements display of different controls based on different conditions, and angularjs implements controls

To meet project requirements, you need to implement the function of displaying different controls according to different conditions. Specific requirements are shown in:

That isWhen "fixed reduction per order" is selected, only the "relief amount" column is displayed below;

When "fixed discount per order" is selected, only the "discount proportion" column is displayed below;

When you select "full reduction per order", only the "full..." columns are displayed below.

According to your understanding of angular, you can easily implement this function.

Js sets the control hiding and display, and sets the display and visibility attributes of the control style.

You can use JavaScript to hide controls by setting the "display" and "visibility" attributes of the style.

When style. display = "block" or style. visibility = "visvisible" when the controller is visible, when the style. display = "none" or style. visibility = "hidden" when the controller is invisible. The difference is that "display" not only hides the control, but hidden controls no longer occupy the position occupied by the display. The "visibility" hidden control only sets the control to invisible, the widget still occupies the original position.

The execution result is as follows:

Appendix

Some source code is as follows:

Function displayHideUI () {var ui = document. getElementById ("bbs"); ui. style. display = "none";} function displayShowUI () {var ui = document. getElementById ("bbs"); ui. style. display = ""; // If the display is empty, the block will wrap the space.} function visibilityHideUI () {var ui = document. getElementById ("bbs"); ui. style. visibility = "hidden";} function visibilityShowUI () {var ui = document. getElementById ("bbs"); ui. style. visibility = "visible" ;}</script>

Value description

None this element is not displayed.

Block: This element is displayed as a block-level element with a line break before and after it.

Inline default. This element is displayed as an inline element, and there is no line break before and after the element.

Inline-block the block element in the row. (Newly added value of CSS2.1)

List-item this element is displayed as a list.

Run-in this element is displayed as a block-level element or Inline element based on the context.

Compact CSS has the value compact, but it has been deleted from CSS2.1 due to lack of extensive support.

Marker CSS has a value of marker, but it has been deleted from CSS2.1 due to lack of extensive support.

Table: This element is displayed as a block-Level table (similar to <table>), with a line break before and after the table.

Inline-table: This element is displayed as an inline table (similar to <table>). There is no line break before and after the table.

Table-row-group: This element is displayed as a group of one or more rows (similar to <tbody> ).

Table-header-group: This element is displayed as a group of one or more rows (similar to <thead> ).

Table-footer-group: This element is displayed as a group of one or more rows (similar to <tfoot> ).

Table-row: This element is displayed as a table row (similar to <tr> ).

Table-column-group: This element is displayed as a group of one or more columns (similar to <colgroup> ).

Table-column: This element is displayed as a cell column (similar to <col>)

Table-cell: This element is displayed as a table cell (similar to <td> and <th>)

Table-caption: This element is displayed as a table title (similar to <caption>)

Inherit specifies that the value of the display attribute should be inherited from the parent element.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!