Question

我有2个单选按钮，用于选择单位（厘米/英尺）。如果选择“ cm”，则文本将变为cm。

单击Bootstrap中的单选按钮时如何显示/隐藏文本

这是我的示例代码

<style>
body {
    padding:50px;
}
.btn-select { border:1px solid #333 }
.btn-select.active { background:#999}
</style>

<div class="unit done">
  <input type="text" id="" name="" class="input1" value="" style="width:230px">
  <em>cm</em>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-select active">  
    <input type="radio" name="wrist" id="wrist1" autocomplete="off" checked /> cm  
  </label>

  <label class="btn btn-select">
    <input type="radio" name="wrist" id="wrist2" autocomplete="off" /> in
  </label>
</div>

Answer 1

请先添加jQuery脚本，然后使用此代码

import { Component, EventEmitter, forwardRef, HostBinding, Input, OnInit, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.component.html',
  styleUrls: ['./category-list.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CategoryListComponent),
      multi: true
    }
  ]
})
export class CategoryListComponent implements OnInit, ControlValueAccessor {

  myControl = new FormControl();
  selectedValue;
  filteredOptions: Observable<string[]>;
  question = 'Would you like to add ';
  @Input() options: string[];
  @Output() added = new EventEmitter();

  // Function to call when the option changes.
  onChange(option: string) {

  }

  // Function to call when the input is touched (when the autocomplete is clicked).
  onTouched() {

  }

  get value() {
    return this.selectedValue;
  }

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(option => option ? this.filter(option) : this.options.slice())
      );
  }

  optionSelected(option) {
    if (option.value.indexOf(this.question) === 0) {
      const newOption = option.value.substring(this.question.length).split('?')[0];
      this.options.push(newOption);
      this.added.emit(newOption);
      this.myControl.setValue(newOption);
      this.writeValue(newOption);
    } else {
      this.myControl.setValue(option.value);
      this.writeValue(option.value);
    }
  }

  enter() {
    const controlValue = this.myControl.value;
    if (!this.options.some(entry => entry === controlValue)) {
      this.added.emit(controlValue);
      const index = this.options.push(controlValue);
      setTimeout(
        () => {
          this.myControl.setValue(controlValue);
          this.writeValue(controlValue);
        }
      );
    } else {
      this.writeValue(controlValue);
    }
  }

  // Allows Angular to update the model (option).
  // Update the model and changes needed for the view here.
  writeValue(option: string): void {
    console.log(`writeValue called with ${option}`);
    this.selectedValue = option;
    this.myControl.setValue(option);
    this.onChange(option);
  }

  // Allows Angular to register a function to call when the model (rating) changes.
  // Save the function as a property to call later here.
  registerOnChange(fn: (option: string) => void): void {
    this.onChange = fn;
  }

  // Allows Angular to register a function to call when the input has been touched.
  // Save the function as a property to call later here.
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  private filter(value: string): string[] {
    let results;
    if (value) {
      results = this.options
        .filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
      if (results.length < 1) {
        results = [this.question + value + '?'];
      }
    } else {
      results = this.options.slice();
    }
    return results;
  }

}

Demo fiddle

Answer 2

Bootstrap不会像这样进行自定义DOM操作。您需要使用一些基本的jQuery：

sum

Demo fiddle

单击Bootstrap中的单选按钮时如何显示/隐藏文本

2 个答案: