Angularjs如何在点击复选框时在线输入两个输入

我试图在单击复选框后内联两个输入，因此如果单击内联复选框，那两个输入将坐在一行中。有任何想法吗？Angularjs如何在点击复选框时在线输入两个输入

点击 “在线” 复选框前：

问题内嵌
输入文字...

点击 “在线” 复选框后：
问题输入文本...在线

<!doctype html> 
<html ng-app> 
    <head> 
    <title>Angular - My Notes</title> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
    </head> 

    <body> 
     <h1>My Notes</h1> 
     <div class="note-section"> 
     <input type="text" placeholder="Question"> 
     <input type="checkbox" name="check" value="inline"> Inline <br> 
     <input type="text" placeholder="enter text..."> 
     </div> 
    </body> 
</html>

来源

2014-02-27 Jusleong

你可以像这样把一个ng-hide放在上面：

<div ng-app> 
    <input type="text" placeholder="Question"> 
    <input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline 
    <br ng-hide="inlineChecked"> 
    <input type="text" placeholder="enter text...">  
</div>

的jsfiddle：http://jsfiddle.net/robianmcd/CMXcc/

另一个解决方案是使用CSS类来做到这一点：

<div ng-app> 
    <input type="text" placeholder="Question"> 
    <input type="checkbox" name="check" value="inline" ng-model="inlineChecked"> Inline 
    <input ng-class="{'blockInput': !inlineChecked}" type="text" placeholder="enter text...">  
</div>

的jsfiddle：http://jsfiddle.net/robianmcd/gPy45/

来源

2014-02-27 04:24:31 rob

非常感谢！你能指导我如何在“内联”复选框前面输入“输入文本”输入吗？ – Jusleong

@ user3112938你在前面是什么意思？没有选中时，“输入文本”输入已经在内联复选框的右侧。 – rob

我的意思是当内联复选框被点击时，“输入文本”框出现在“Inline”复选框的左侧 – Jusleong

Angularjs如何在点击复选框时在线输入两个输入

回答

相关问题