Angularjs如何在单击复选框时使两个输入串联_Angularjs

Angularjs如何在单击复选框时使两个输入串联

angularjs

Angularjs如何在单击复选框时使两个输入串联,angularjs,Angularjs,我试图在单击复选框后使两个输入内联，因此如果单击内联复选框，这两个输入将位于一行中。有什么想法吗单击“内联”复选框之前：问题在线输入文本单击“内联”复选框后：问题输入文本。。。内联 <!doctype html> <html ng-app> <head> <title>Angular - My Notes</title> <link rel="stylesheet" type="text/css" h

我试图在单击复选框后使两个输入内联，因此如果单击内联复选框，这两个输入将位于一行中。有什么想法吗

单击“内联”复选框之前：

问题在线
输入文本

单击“内联”复选框后：
问题输入文本。。。内联

<!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>


角度-我的笔记
我的笔记
内联

您可以像这样在br上放置一个

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：

另一个解决方案是使用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:

非常感谢！您能告诉我如何在“内联”复选框前面输入“输入文本”吗？@user3112938您所说的“输入文本”是什么意思？未选中时，“输入文本”输入已经位于内联复选框的右侧。我的意思是，当单击内联复选框时，“输入文本”框会转到“内联”复选框的左侧，所以您只希望它向下移动，而不是向左移动？你必须做一些花哨的CSS，而我对CSS不是很在行，所以别以为我能帮你。对不起，没有，但是我已经更新了帖子，它解释得更详细了，请帮忙~