Ways to assign a value to an input element in AngularJS without impacting its ngModel

Question

Ways to assign a value to an input element in AngularJS without impacting its ngModel

JAVASCRIPT:

.directive('search', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('placeholder', 'Word...');
            console.log(attrs);
        }
    };
}]);

Although the value attribute is being added, it isn't displayed. This issue may be related to the ngModel attribute not allowing changes to the value. However, based on what I've seen in the AngularJS documentation, it is possible to set the value programmatically. Could someone guide me on how to do this?

HTML:

<input type="text"
ng-model="query"
ng-init="inputClass='input-inactive'"
ng-class="inputClass"
ng-focus="inputClass='input-active'"
ng-blur="inputClass='input-inactive'"
ng-change="searchModelChange()"
search />

Edit: Ultimately, I want to have the input display 'Search items...' when idle, clear when focused, and revert back to 'Search items...' if empty when blurred.

I understand that achieving this functionality with an external JS function using "getElementById" may not be optimal. I believe there should be a way to accomplish this within AngularJS from the link function, but I'm unsure of how...

Edit 2: Is there a solution different from using placeholder? If I had a requirement beyond the scenario described in the first edit, how could I address it?

javascript angularjs

Answer 1

Answer №1

Is something along these lines what you're looking for?

.directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defaultText = attrs.search;

        ngModel.$render = function(value) {
          var text = (!value && value !== 0) ? defaultText : value;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defaultText);
        });

      }
    };
  }
]);

angular.module('app', []).directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defaultText = attrs.search;

        ngModel.$render = function(value) {
          var text = (!value && value !== 0) ? defaultText : value;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defaultText);
        });

      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
  <input type="text" ng-model="query" search="Type here..." />{{query}}
</div>

Answer 2

Is something along these lines what you're looking for?

.directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defaultText = attrs.search;

        ngModel.$render = function(value) {
          var text = (!value && value !== 0) ? defaultText : value;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defaultText);
        });

      }
    };
  }
]);

angular.module('app', []).directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defaultText = attrs.search;

        ngModel.$render = function(value) {
          var text = (!value && value !== 0) ? defaultText : value;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defaultText);
        });

      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
  <input type="text" ng-model="query" search="Type here..." />{{query}}
</div>

Answer 3

Answer №2

The placeholder attribute is used to provide a brief hint about the expected input value in an input field (e.g. sample value, format description).

For instance,

<input type="email" id="userEmail" placeholder="Please enter your email address." class="form-control">

Is this what you are searching for?

Answer 4

The placeholder attribute is used to provide a brief hint about the expected input value in an input field (e.g. sample value, format description).

For instance,

<input type="email" id="userEmail" placeholder="Please enter your email address." class="form-control">

Is this what you are searching for?

Answer 5

Answer №3

To modify the placeholder text, you can utilize the onfocus and onblur attributes:

<input 
  type="text" 
  ng-model="searchUser" 
  placeholder="Search for items" 
  onfocus="this.placeholder = ''" 
  onblur="this.placeholder = 'Search for items'"
  class="form-control search-filter"
 >

Answer 6

To modify the placeholder text, you can utilize the onfocus and onblur attributes:

<input 
  type="text" 
  ng-model="searchUser" 
  placeholder="Search for items" 
  onfocus="this.placeholder = ''" 
  onblur="this.placeholder = 'Search for items'"
  class="form-control search-filter"
 >

Ways to assign a value to an input element in AngularJS without impacting its ngModel

Answer №1

Answer №2

Answer №3

Similar questions

TinyMCE - The control with the name 'content' is considered invalid and cannot receive focus

Creating linear overlays in Tailwind CSS can be achieved by utilizing the `bg-gradient

Utilizing ChartJS to convert a chart into a Base64 image within a Vue environment

Fetch a document from a NodeJS Server utilizing Express

Disable system discord.js

What are the best practices for implementing optional chaining in object data while using JavaScript?

Is there a method to directly download large files from the server without having to wait for the blob response?

What are your thoughts on the practice of utilizing the useState hook within a component to send data to its parent component?

Building module dependencies in the Dojo dojo

Mastering the art of crafting and managing NodeJS promises with finesse

When running `aws-cdk yarn synth -o /tmp/artifacts`, an error is thrown stating "ENOENT: no such file or directory, open '/tmp/artifacts/manifest.json'"

Guide on displaying JSON information upon clicking using JavaScript

Retrieve the route from a specific node in the jstree structure

What could be causing the JavaScript array to not successfully transfer to PHP?

What are the steps to transform a blob into an xlsx or csv file?

What could be causing my default prop to not be transmitted to the child component in vuejs2?

What is the best way to reach a webpage in Protractor without using Angular?

Troubleshooting Protractor in Intellij: A step-by-step guide

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview

Encountering a [$injector:modulerr] error while attempting to include modules in ZURB Foundation for Apps