Question

我有一个简单的想法的麻烦。如何删除＆＃34; Hello＆＃34;当用户单击输入字段以仅显示他们正在键入的文本时。

我需要＆＃34;你好＆＃34;在H1标签中保持并且仅在用户单击输入字段以开始键入时消失。

<div>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">

  <h1>Hello {{yourName}}</h1>
</div>

我尝试使用jquery来清空或分离H1标签，但这也剥夺了表达式。

感谢您的帮助。

Answer 1

您可以在绑定语法中执行此操作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">

  <h1>{{yourName || 'Hello'}}</h1>
</div>

Answer 2

你可以将hello文本保存到一个范围内并给它一个类。

<span ng-if="yourName">hell0</span>

Answer 3

使用其他变量

<h1>{{ myLabel }}{{yourName}}</h1>

然后在控制器中

$scope.myLabel = 'Text as you please'; //'' to clear

Answer 4

将Hello包裹在span内：

<div ng-app>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">

  <h1><span id="temp">Hello </span>{{yourName}}</h1>
</div>

现在您可以编写此jquery以使您的功能正常工作：

    $("input").focus(function(){
        $("#temp").hide();
    })

    $("input").blur(function(){
        $("#temp").show();
    })

现在附加链接：http://codepen.io/Sky-123/pen/jrLBRA

希望这会有所帮助!!

如何在AngularJS中的{{expression}}之前删除文本

4 个答案: