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

JQuery Chosen extension - Go back to "Choose an option"

Error in jQuery when element is not found

Why does the code require the use of window when the Javascript error object is not functioning properly?

Issue of displaying buttons based on sibling's height under certain conditions

Converting a jQuery function into AngularJS: A step-by-step guide

Steps to eliminate pre-chosen alternatives upon loading select control?

Is it possible to create an AngularJS and jQuery Calendar Directive that activates by clicking on a Bootstrap glyphicon?

AngularJS Circular Dependency - Metamorphosis

Is it possible for me to ensure that the argument passed to `res.write` is sent as one solid chunk?

RxJS - Only emit if another source does not emit within a specified time frame

Styled-components is not recognizing the prop `isActive` on a DOM element in React

"After the document is fully loaded, the Ajax post function is failing to work

Moment JS initialization and the utc() function

React JS - In order to display multiple children, consider utilizing an array rather than individual elements

Issue with Angular js Factory calling as "function is not defined"

What is the best way to create an array in jQuery based on the presence of set variables?

Exploring the capability of utilizing undefined properties within the ng model in Angular

Use JavaScript to convert only the initial letter to uppercase

Designing a unique shape geometry using THREE JS

Remove array element by key (not numerical index but string key)