Dynamically change an input field’s placeholder (angular js)

Picture of Amitpal Singh
Amitpal Singh
August 7, 2022

Here's how you can change the placeholder dynamically, change div inner text and div inner html:

Angular js help you in number of applications. I use this tutorial for language change on the behlaf of user’s selection
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body  ng-app="myApp" ng-controller="myCtrl">



First Name: <input type="text" ng-model="firstName" ng-attr-placeholder="{{somevalue}}"><br><br>
Last Name: <input type="text" ng-model="lastName"><br>

<hr>
<span ng-bind="amit"></span>
<hr>
<span ng-bind-html="amitpal"></span>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
   $scope.somevalue = "name goes here"; //change placeholder
    $scope.amit = "div text"; //change div text
    $scope.amitpal = $sce.trustAsHtml("div<br>text"); //chnage div text as html
});
</script>

</body>
</html>
 

Output:

Share this post:

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.