在Angular上点击显示/隐藏4

问题描述：

我用Angular创建了一个基本的显示/隐藏功能，但我觉得必须有更优雅的解决方案。在Angular上点击显示/隐藏4

这里是我当前的代码plnkr： http://plnkr.co/edit/Q8NfhTL25Y8gOoGMXiP2?p=preview

HTML：

<div class="container"> 
    <label> 
     <input class="pvq-create-checkbox" type="checkbox" name="" value="" (click)='question1()'> 
     <div class="pvq-create-label"> 
     <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh?</p> 
     </div> 
    </label> 
    <label [@hideShow]='state1'>Answer 
     <input type="textbox" name=""> 
    </label> 
    </div>

逻辑：

state1: string = 'inactive'; 
    state2: string = 'inactive'; 

    question1() { 
    this.state1 = (this.state1 === 'inactive' ? 'active' : 'inactive'); 
    } 

    question2() { 
    this.state2 = (this.state2 === 'inactive' ? 'active' : 'inactive'); 
    }

下面是使用表单的替代方法：http://plnkr.co/edit/pemDTePMm8hY1lJ3Nwfi?p=preview。我对动画知之甚少，但我担心的问题是，隐藏时答案文本框仍处于DOM中，因此验证程序仍然适用，即使它们不可见。 –

对于Angular来说，我相当陌生，您的方式是我想达到的最佳做法吗？如果你试图达到相同的结果，但是从头开始，这是你会做的吗？ – Dachan

我不知道动画足以回答这个问题。但是当然你需要知道复选框和输入字段的值是什么，所以你需要一个表单和绑定。 –

答

您是过度设计通过使用animations DSL这样的简单的动画。如果您只需要修改不透明度，则最好使用css并切换类。

例component.ts：

class MyComponent { 

    showButtons: any = { 
     q1: false, 
     q2: false 
    } 

    toggleButton(button: string): void { 
     this.showButtons[button] = !this.showButtons[button] 
    } 
}

component.html

<input type="text" [class.show]="showButtons.q1" placeholder="Answer 1"> 
<button (click)="toggleButton('q1')">Show question 1</button> 

<input type="text" [class.show]="showButtons.q2" placeholder="Answer 2"> 
<button (click)="toggleButton('q2')">Show question 2</button>

现在您切换show类中的每个的那些输入。您可以在css中创建简单的动画，而不是使用动画。

那么你会在什么时候开始使用Angular的动画属性？我不想通过CSS开始做一些动画，然后通过Angular做一些动画。 – Dachan

@Dachan嗯，你可以随时使用Angular的动画DSL，并完全抛弃css动画。我个人认为一些基本的动画会用Angular的''动画'DSL来编码太多的代码，而对于css来说，它只会占用很少的代码。如果你不喜欢用Angular和一些用css做一些，那么就去完整的'动画'DSL。 – borislemke

在Angular上点击显示/隐藏4

相关推荐