AngularJS指令隐藏零时＆LT;输入＆GT;最初加载到DOM [英] AngularJS directives to hide zero when <input> is initially loaded to the DOM

问题描述

我想实现的角度指令，将尽快隐藏领域零的是DOM。基本上这

<一个href=\"http://stackoverflow.com/questions/26537792/hide-value-in-input-when-its-zero-in-angular-js\">Hide在输入值时，它的零角度的js

我的code是这个样子：
    ＆LT;输入隐藏零的onload NG模型=测试＆GT;＆LT; /输入＆GT;

  .directive（'hideZeroOnload'，函数（）{
    返回{
        链接：功能（范围，元素）{
            element.on（'输入负荷'，函数（）{
                的console.log（'加载'）;
                如果（THIS.VALUE ==='0'）{
                    THIS.VALUE =' - ';
                }
            }）;
        }
    };
}）;
 

不过，控制台日志从不打印。我也试过'输入的onload，输入初始化，输入所有和输入，与所有相同的结果。我不知道是什么事件关键字时，首次添加到DOM发射？或者我怎么能找到？
您可以检查code OUT http://plnkr.co/edit/TwraJlxZSd3TeSYscExq p = preVIEW

解决方案

看看 $格式化用于这一目的。它们被设计为当模型被改变或最初加载格式化模型的图。 Plunkr http://plnkr.co/edit/SA9xz6eQmk3t7qfRack7?p=$p$pview

您的指令，然后将是这个样子：

  .directive（'hideZero'，[功能（）{
    返回{
      要求：'？ngModel'，//得到NgModelController的举行
      链接：功能（范围，元素，ATTRS，ngModel）{        //指定UI应该如何更新
        ngModel。$ formatters.push（函数（值）{
          如果（价值=== 0）{
            //如果值是零，则返回一个空字符串。
            返回'';
          }          返回值;
        }）;
      }
    };
  }]）;
 

的负荷事件可能不会触发所有元素。 jQuery的单一元素

I am trying to implement an angular directive that will hide zero of field as soon as the is on DOM. basically this

Hide Value in input when it's zero in angular Js

my code look something like this : <input hide-zero-onload ng-model="test"></input>

.directive('hideZeroOnload', function() {
    return {
        link: function(scope, element) {
            element.on('input load', function() {
                console.log('loaded');
                if (this.value === '0') {
                    this.value = '-';
                }
            });
        }
    };
});

However,the console log is never printed. I also tried 'input onload', 'input init', 'input all', and 'input', with all the same result. I don't know what event keyword is emitted when the is first added to the DOM? or how can I find out? You can check the code out http://plnkr.co/edit/TwraJlxZSd3TeSYscExq?p=preview

解决方案

Take a look at $formatters for this purpose. They are designed to format the view of the model when the model is changed or initially loaded. Plunkr http://plnkr.co/edit/SA9xz6eQmk3t7qfRack7?p=preview

Your directive would then look something like this:

.directive('hideZero', [ function() {
    return {
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {

        // Specify how UI should be updated
        ngModel.$formatters.push(function(value) {
          if (value === 0) {
            // If the value is zero, return a blank string.
            return '';
          }

          return value;
        });
      }
    };
  }]);

The load event may not fire for all elements. Jquery on() load event on a single element

这篇关于AngularJS指令隐藏零时＆LT;输入＆GT;最初加载到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！