Question

如何通过点击<button>？

切换文章视图

<button ng-click="/* change view and button label */">Label</button>
<article ng-if="/* */">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</article>
<article ng-if="/* */">
    <input type="text" value="{{title}}">
    <textarea>{{content}}</content>
</article>

Answer 1

您需要维护一个scope变量showInputsArticleWithInput＆amp;使用button指令点击ng-click进行切换。

如果您想更改按钮文字，可以使用ng-bind指令ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"

<强>标记

<button type="text" ng-click="showInputsArticleWithInput = !showInputsArticleWithInput"
ng-bind="showInputsArticleWithInput? 'Edit': 'Close'"></button>
<article ng-if="!showInputsArticleWithInput">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</article>
<article ng-if="showInputsArticleWithInput">
    <input type="text" value="{{title}}">
    <textarea>{{content}}</content>
</article>

使用ng-click和ng-if切换视图

1 个答案: