AngularJS显示p标签第一默认HTML，但是有输入

改变我有一个p标签和文字input。我想显示默认的HTML（如[输入文字]）在第一p标签（当页面加载），但是当用户写在输入框中输入一些文字会被修改。输入标签将有一个占位符（例如请在这里输入），没有默认值。我试图在输入标签中使用ng-model，但它也使输入的值等于我不想要的模型。在页面加载时，输入标签值将与p标签不同。AngularJS显示p标签第一默认HTML，但是有输入

更新：通过这种方式 https://jsfiddle.net/acmnosyf

来源

2016-07-27 Tuhin Subhra Mandal

请在关键了警钟方法或使用jQuery添加代码 –

解决我试图做一个例子给你的问题here。

我将p标记的模型设置为input的不同模型。

<p>{{text}}</p> 
<input ng-model="inputText" ng-change="changed(inputText)" type="text">

所以当输入改变时changed函数被调用。在你的控制器，你只需要实现changed这样的功能

app.controller('MyCtrl', function($scope) { 
    var text = "myText"; 
    $scope.text = text; 

    $scope.changed = function(input) { 
    $scope.text = input; 

    // Resset text to default value 
    if (input === "") { 
     $scope.text = text; 
    } 
    } 
});

希望这会有所帮助。

编辑就像一个评论说，最优雅的方式来设置p一个是

<p>{{text ? text : "My text" }}</p> 
<input ng-model="text" type="text">

来源

2016-07-27 09:44:04 k4l4m

其中'$ scope.variable '为'p'标签的模型更新。 –

是的没错，但在控制器中使用jQuery并不是完成这些任务的角色。另一种方法是纠正处理控制器所做事情的指令，但我认为这是实现他想要的事情的最简单方法。 – k4l4m

是的，没错。我只是表现出另一种方式。 –

AngularJS显示p标签第一默认HTML，但是有输入

回答

相关问题