Угловой Как переключить цвет кнопки, которая находится внутри группы кнопок, если она нажата? - PullRequest
Новая
       12

Угловой Как переключить цвет кнопки, которая находится внутри группы кнопок, если она нажата?

0 голосов
/ 01 июня 2018

У меня есть группа кнопок в угловом 6 компоненте: 

<div class="container">
    <div class="row">
      <div class="clearfix text-center" [hidden]="!searchTerm">
        <span class="inline">Filter results by :</span>
        <div class="float-right">
          <button type="submit" class="btn btn-primary" (click)="performSearch(searchTerm)">All</button>
          <button type="submit" class="btn btn-secondary" (click)="domainesFilter(searchTerm)">Domaines</button>
          <button type="submit" class="btn btn-secondary" (click)="sectionsFilter(searchTerm)">Sections</button>
          <button type="submit" class="btn btn-secondary" (click)="groupsFilter(searchTerm)">Groups</button>
          <button type="submit" class="btn btn-secondary" (click)="documentFilter(searchTerm)">Documents</button>
     
        </div>
      </div>
    </div>
  </div>

Я хочу изменить цвет кнопки на основной, если она нажата, и установить цвет других кнопок на дополнительный, как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 01 июня 2018 
<div class="container">
  <div class="row">
    <div class="clearfix text-center" >
      <span class="inline">Filter results by :</span>
      <div class="float-right">
        <button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='All', 'btn-secondary':ActiveButton!='All'}" (click)="Search(searchTerm, 'All')">All</button>
        <button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Domaines', 'btn-secondary':ActiveButton!='Domaines'}" (click)="Search(searchTerm, 'Domaines')">Domaines</button>
        <button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Sections', 'btn-secondary':ActiveButton!='Sections'}" (click)="Search(searchTerm, 'Sections')">Sections</button>
        <button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Groups', 'btn-secondary':ActiveButton!='Groups'}" (click)="Search(searchTerm, 'Groups')">Groups</button>
        <button type="submit" class="btn" [ngClass]="{'btn-primary':ActiveButton=='Documents', 'btn-secondary':ActiveButton!='Documents'}" (click)="Search(searchTerm, 'Documents')">Documents</button>
      </div>
    </div>
  </div>
</div>

И код js такой: 

 Search(searchTerm, btn) {
    this.ActiveButton = btn;
    switch ( btn ) {
      case 'All':
      console.log('All');
      break;
      case 'Domaines':
      console.log('Domaines');
      break;
      case 'Sections':
      console.log('Sections');
      break;
      case 'Groups':
      console.log('Groups');
      break;
      case 'Documents':
      console.log('Documents');
      break;
    }
  }
0 голосов
/ 01 июня 2018

Вы можете сделать что-то вроде этого:

Компонент ts 

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

  selBtn: string;

  constructor() { }

  ngOnInit() {
  }

  performA(): void {
    this.selBtn = 'a';
  }

  performB(): void {
    this.selBtn = 'b';
  }

  performC(): void {
    this.selBtn = 'c';
  }

  performD(): void {
    this.selBtn = 'd';
  }

  performE(): void {
    this.selBtn = 'e';
  }

}

Шаблон 

<div class="container">
  <div class="row">
    <div class="clearfix text-center">
      <span class="inline">Filter results by :</span>
      <div class="float-right">
        <button type="submit" class="btn {{ selBtn === 'a' ? 'btn-primary' : 'btn-secondary' }}" (click)="performA()">A</button>
        <button type="submit" class="btn {{ selBtn === 'b' ? 'btn-primary' : 'btn-secondary' }}" (click)="performB()">B</button>
        <button type="submit" class="btn {{ selBtn === 'c' ? 'btn-primary' : 'btn-secondary' }}" (click)="performC()">C</button>
        <button type="submit" class="btn {{ selBtn === 'd' ? 'btn-primary' : 'btn-secondary' }}" (click)="performD()">D</button>
        <button type="submit" class="btn {{ selBtn === 'e' ? 'btn-primary' : 'btn-secondary' }}" (click)="performE()">E</button>
      </div>
    </div>
  </div>
</div>

В противном случае вы можете назначить .btn-Secondary для всех ваших кнопок,затем добавление btn-primary только при необходимости, например, так: 

<button type="submit" class="btn btn-secondary" [ngClass]="{'btn-primary' : selBtn === 'e'}" (click)="performE()">E</button>

При использовании этого решения вам может понадобиться настроить ваш css, чтобы быть уверенным, что класс btn-primary переопределяет все свойства класса btn-primary

...