Portal script is not working properly in HTML

[chandanpatra]

Hi All,

From server side correct value is coming true or false"{{data.matchfound}}" while writing in Ng if condition 

<div ng-if="data.matchfound" this part is not working .

Can you help me to resolve the issue.

<div ng-if="data.matchfound" id="buttonContainer" style="display: flex; gap:15px; " >
<div ng-repeat="key in data.inc">
<button class="btn btn-primary" ng-click="c.selectCategory(key)" ng-class="key.button?'clicked-button':'clicked-button2'"> {{key.name}}</button>
</div>
</div>

Thanks,

Chandan

[Runjay Patel]

Hi @chandanpatra ,

If correct value will from server then your HTML code will work properly. I checked while passing true and false.

Hope you are setting like below in server script.

data.matchfound = true;

In order to check just pass the static true value and check, for me same code is working.

-------------------------------------------------------------------------

If you found my response helpful, please consider selecting "Accept as Solution" and marking it as "Helpful." This not only supports me but also benefits the community.

Regards
Runjay Patel - ServiceNow Solution Architect
YouTube: https://www.youtube.com/@RunjayP
LinkedIn: https://www.linkedin.com/in/runjay

-------------------------------------------------------------------------

[Juhi Poddar]

Hello @chandanpatra 

Code looks good to me.

• The potential reason that I see is data.matchfound is returning string value true/false. 
• ng-if="data.matchfound" works when it has boolean true/false value.

Here is the script:

HTML

<div ng-if="data.matchfound" id="buttonContainer" style="display: flex; gap:15px;">
    <div ng-repeat="key in data.inc">
        <button class="btn btn-primary" ng-click="c.selectCategory(key)"
                ng-class="key.button ? 'clicked-button' : 'clicked-button2'">
            {{key.name}}
        </button>
    </div>
</div>

 Server script:

data.matchfound = true; //should be boolean true/false
data.inc = [{name:'Tech majis'},{name:'People Exp'}];

Result in my PDI:

 Note:

• if data.matchfound = "false"; then it will not work as expected.
• If for any reason data.matchfound contain string 'true'/'false', this can be manipulated in client script

api.controller=function($scope) {
  /* widget controller */
  var c = this;
	$scope.data.matchfound = $scope.data.matchfound === 'true'; // Convert to boolean if it's a string
};

• This above script is needed only is data.matchfound contain string 'true'/'false'.

Hope this resolves your issue!

"If you found my answer helpful, please give it a like and mark it as the "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar