Question

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

点击“内联”复选框：

问题内联
输入文字...

点击“内联”复选框后：
问题输入文字...内联

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

Answer 1

你可以像这样在{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：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/

Angularjs如何在单击复选框上内联两个输入

1 个答案: