Portal script is not working properly

[chandan86patra]

HI All,

portal script is not working properly , Can anyone help me 

<div id="buttonContainer">
<span ng-repeat="key in data.inc" >{{key.name}}</span>


<div ng-nepeat="key.name==='Tech majis' ">
<button class="btn btn-primary" ng-click="c.selectCategory('IT')" ng-class="{'clicked-button': buttonClicked}">IT</button>

<div ng-nepeat="key.name==='People Exp' ">
<button class="btn btn-primary" ng-click="c.selectCategory1('HR')" ng-class="{'click-button': buttonClick}">HR</button>

<div ng-nepeat="key.name==='Customer support' ">
<button class="btn btn-primary" ng-click="c.selectCategory2('Finance')" ng-class="{'clcked-button': buttonClcked}">Finance</button>
</div>
</div>
</div>
</div>

key in data.inc  we are receiving two value still it is showing all the three buttons and the buttons are not coming in horizontal.

Can anyone help me 

Thanks and Regards,

Chandan

[Juhi Poddar]

Hello @chandan86patra 

There are few issues in the script:

• Typo mistake, used 'ng-nepeat' instead of 'ng-repeat' in several places
• <div> elements are not structured correctly
• To display buttons horizontally, you should wrap them in a flexbox container or apply CSS styling.
• Button click class syntax: Ensure the class name is consistent across your ng-class properties.

Updated script:

HTML

<div id="buttonContainer" style="display: flex; gap: 10px;">
  <span ng-repeat="key in data.inc">{{key.name}}</span>

  <div ng-if="key.name === 'Tech majis'">
    <button class="btn btn-primary" ng-click="c.selectCategory('IT')" ng-class="{'clicked-button': buttonClicked}">
      IT
    </button>
  </div>

  <div ng-if="key.name === 'People Exp'">
    <button class="btn btn-primary" ng-click="c.selectCategory1('HR')" ng-class="{'clicked-button': buttonClicked1}">
      HR
    </button>
  </div>

  <div ng-if="key.name === 'Customer support'">
    <button class="btn btn-primary" ng-click="c.selectCategory2('Finance')" ng-class="{'clicked-button': buttonClicked2}">
      Finance
    </button>
  </div>
</div>

CSS

#buttonContainer {
  display: flex;
  gap: 10px;
}

.clicked-button {
  background-color: #007bff;
  color: white;
}

I hope the updated script helps you to resolve the 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

[chandan86patra]

@juhi Poddar this script is not working poperly 

[Juhi Poddar · Accepted solution]

Hello @chandan86patra 

Sorry! Missed placing the </span> tag correctly.

Here is the updated script:

HTML

<div id="buttonContainer" style="display: flex; gap: 10px;">
  <span ng-repeat="key in data.inc">{{key.name}}

  <div ng-if="key.name === 'Tech majis'">
    <button class="btn btn-primary" ng-click="c.selectCategory('IT')" ng-class="{'clicked-button': buttonClicked}">
      IT
    </button>
  </div>

  <div ng-if="key.name === 'People Exp'">
    <button class="btn btn-primary" ng-click="c.selectCategory1('HR')" ng-class="{'clicked-button': buttonClicked1}">
      HR
    </button>
  </div>

  <div ng-if="key.name === 'Customer support'">
    <button class="btn btn-primary" ng-click="c.selectCategory2('Finance')" ng-class="{'clicked-button': buttonClicked2}">
      Finance
    </button>
  </div>
    </span>
</div>

CSS

#buttonContainer {
  display: flex;
  gap: 10px;
}

.clicked-button {
  background-color: #007bff;
  color: white;
}

 Preview of result:

The updated script is tested in my PDI and it works for me. Hope this resolves your query.

"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