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，但是有輸入

回答

相關問題