rendering a dynamic placeholder with angular

后端 未结 2 1512
暖寄归人
暖寄归人 2021-01-14 00:19

I\'ve looked around, found several resources labeled \'ng-placeholder\' or something incredibly similar. I cannot get this to work:

相关标签:
2条回答
  • 2021-01-14 00:48

    There exists a conditional attribute property in AngularJS ng-attr-{property_name}

    For example, I'm using different placeholders for different search terms using

     ng-attr-placeholder="{{isAdvanceSearch ? setPlaceholder(searchOption) : 'John Smith, 08/23/1970, 123'}}"
    

    Here on the basis of isAdvanceSearch variable, I'm setting different placeholders in setPlaceholder method.

    setPlaceholder method returns the placeholder to set in the input field.

    $scope.setPlaceholder = function(searchOption) {
         if (searchOption === "foo") {
              return "Search by foo… e.g. foo1";
         } else if (searchOption === "bar") {
              return "Search by bar… e.g. bar123";
         } else {
              return "John Smith, 08/23/1970, 123";
         }
    };
    

    Note: John Smith, 08/23/1970, 123 is the default placeholder. Don't forget to wrap the expression in the {{}} brackets.

    0 讨论(0)
  • 2021-01-14 01:00

    Why not write your own directive for ng-placeholder? Something simple like this should work. You can call it in your html like this

    <input ng-placeholder='test'>
    

    Where test is a scope variable in the current controller.

    .directive('ngPlaceholder', function($document) {
      return {
        restrict: 'A',
        scope: {
          placeholder: '=ngPlaceholder'
        },
        link: function(scope, elem, attr) {
          scope.$watch('placeholder',function() {
            elem[0].placeholder = scope.placeholder;
          });
        }
      }
    });
    
    0 讨论(0)
提交回复
热议问题