AngularJS首先在p标签中显示默认html，但随着输入而改变

Question

我有一个p 标签和一个文本input。我想首先在 p 标记中显示默认 html（例如 [[enter text]]）（当页面加载时），但是当用户在输入框中写一些文本时它会被修改。输入标签将有一个占位符（例如请在此处输入），没有默认值。我尝试在输入标签中使用ng-model，但它也使输入的值等于我不想要的模型。在页面加载时输入标签值将不同于 p 标签。

更新：这样解决 https://jsfiddle.net/acmnosyf

Answer 1

我试图为你的问题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;
    }
  }
});

希望这会有所帮助。

编辑 就像其中一位 cmets 所说，设置p 的最优雅的方式之一是

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