Question

我在filterbystar div中有四个带有辐射按钮的div。如果用户选择单选按钮，则应选择辐射按钮，filterbystar div应添加active类，单选按钮不应显示。如何在angulajs2中做到这一点？

我的代码在这里。

        <div class="box_cont">
        <div class="box_1 filterbystar" >
            <p class="box_1_text">Any</p>
            <input type="radio" name="starvalue" value="any" class="" (click)="userTypeSelect($event)">
        </div>
        <div class="box_2 filterbystar" (click)="userTypeSelect($event)">
            <p class="box_2_text">2 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="2" class="" (click)="userTypeSelect($event)">
        </div>
        <div class="box_2 filterbystar" (click)="userTypeSelect($event)">
            <p class="box_2_text">3 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="3" class="" (click)="userTypeSelect($event)">
        </div>
        <div class="box_2 filterbystar" (click)="userTypeSelect($event)">
            <p class="box_2_text">4 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="4" class="" (click)="userTypeSelect($event)">
        </div>
    </div>



    export class ExploreListComponent implements OnInit {

        userTypeSelect(event:any){
            event.preventDefault();
            //this.render.
            this.StarSelected= true;
            this.render.setElementClass(event.target,"active",true);
        }
    }

Answer 1

模板面：

<div class="box_cont">
        <div class="box_1 filterbystar" [ngClass]="{'active':(selectedValue === '1')}" >
            <p class="box_1_text">Any</p>
            <input type="radio" name="starvalue" value="1" class="" (click)="userTypeSelect($event.target.value)"
            [hidden]='selectedValue === "1"'>
        </div>
        <div class="box_2 filterbystar" [ngClass]='{"active":selectedValue === "2"}'>
            <p class="box_2_text">2 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="2" class="" (click)="userTypeSelect($event.target.value)"
            [hidden]='selectedValue === "2"'>
        </div>
        <div class="box_2 filterbystar" [ngClass]='{"active":selectedValue === "3"}'>
            <p class="box_2_text">3 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="3" class="" (click)="userTypeSelect($event.target.value)"
            [hidden]='selectedValue === "3"'>
        </div>
        <div class="box_2 filterbystar" [ngClass]='{"active":selectedValue === "4"}'>
            <p class="box_2_text">4 Stars</p>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <i class="fa fa-star star_size" aria-hidden="true"></i>
            <input type="radio" name="starvalue" value="4" class="" (click)="userTypeSelect($event.target.value)"
            [hidden]='selectedValue === "4"'>
        </div>
    </div>

组件方：

public selectedValue = 0;
userTypeSelect(value)
{
    this.selectedValue = value;
}

这样，您的情况将全部填满

if user select the radio button the radi button should be selected and filterbystar div should be add active class and radio button should not be visible.

如何在angulajs2中使用选定的单选按钮为父div添加类？

1 个答案: