How to use "ng-if" to show a widget on a record producer in Service Portal?

[patricklatella]

Hi gang,

I'm playing around with "ng-if", my goal is to only show a button (created by a widget for a record producer for Service Portal) when a certain variable [u_business] is a certain value.

My HTML script for showing the button is

<div>
<button class="btn btn-default m-b" ng-click="c.click()">
Show Templates
</button></div>

what script do I need to add to my client script on the widget, and how do I put in the "ng-if" in the HTML so it only shows the button if the value passed from the client script is the specific value?

thanks!

[ScienceSoft · Accepted solution]

Hi patricklatella

The first way is:

If need to implement a mechanism that displays a button, only if the variable is equal to a certain value, the ng-if directive can be used as shown in the screenshot below:

The example shows a button only if u_business variable is 2. Otherwise, the button is not shown:

The code is below:

HTML

<div>
  <button class="btn btn-default m-b" ng-if="data.u_business == '2'" ng-click="c.click()">
    Show Templates
  </button>
  <br>
</div>

Client script

function() {
  /* widget controller */
  var c = this;
	c.data.u_business = 2;
}

The second way is:

For implement the same mechanism, directives ng-show and ng-hide are also used.

Differences between ng-if and ng-show(ng-hide):

ng-show (and its sibling ng-hide) toggle the appearance of the element by adding the CSS display: none style.

ng-if, on the other hand, actually removes the element from the DOM when the condition is false and only adds the element back once the condition turns true.

The best practice is to use ng-if because ng-show spends more time

[Chandra Prakash]

Try

<div ng-if="data.u_business" == "any_value">
<button class="btn btn-default m-b" ng-click="c.click()">
Show Templates
</button></div>

Let me know if it is not working.

Regards,

Chandra Prakash

[patricklatella]

Thanks guys...got it working!