How to set value of an input in AngularJS, without affecting its ngModel

Question

JAVASCRIPT:

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

And the value attribute is added, but not displayed. I think it has something to do with ngModel attribute not allowing to change value, but I've seen somewhere in AngularJS docs, that setting value programmatically is possible, so can someone please show me the way how?

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: In the end, I want to get it doing something as simple as displaying something like 'Search items...' before it's focused, when focused, set it to '', and when blured, check if value is '' and set it back to 'Search items...'.

I know it's pretty simple, and I already got this working once with outside JS function, but I feel like it's not the best solution to involve something like "getElementById", I think it must be possible with AngularJS from link function, it's just that I don't know how...

Edit 2: Different from placeholder. Is there a way to solve this? Say, if I needed to achieve something different from what I described in the first edit?

To me it looks like you actually want to set the placeholder-attribute and not the value attribute. I might be wrong about your intentions though — LionC
– LionC, Commented Jul 17, 2015 at 14:19
@PSL yea.. it is... I guess. I just dont like how it's still there when you focus — Ivan Chepurin
– Ivan Chepurin, Commented Jul 17, 2015 at 14:35

PSL · Accepted Answer · 2015-07-17 14:42:52Z

Something like this?

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

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

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

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

      }
    };
  }
]);

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

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

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

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

      }
    };
  }
]);

<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="Word..." />{{query}}
</div>

TheKingPinMirza · Accepted Answer · 2015-07-17 14:25:39Z

0

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

As an example,

<input type="text" ng-model="searchUser" placeholder="Enter a name to search." class="form-control search-filter">

Are you looking for this?

answered Jul 17, 2015 at 14:25

TheKingPinMirza

9,0826 gold badges53 silver badges84 bronze badges

1 Comment

Ivan Chepurin Over a year ago

placeholder could do it, but its behavior is a little different from what I described

Razvan B. · Accepted Answer · 2015-07-17 14:43:34Z

0

You can use onfocus & onblur to change the placeholder:

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

answered Jul 17, 2015 at 14:43

Razvan B.

6,7812 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to set value of an input in AngularJS, without affecting its ngModel

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related