Question

我想制作一个可编辑的输入指令，它可以指示输入的值是否不是初始值。初始值是指从GET请求开始时设置的值。

目前它的工作原理如下：

可编辑输入-directive.js

angular
  .module("shared.directives")

  .directive("editableInput", function() {
    return {
      require: "?ngModel",
      scope: {
        value: "@"
      },
      restrict: "E",
      template:
        '<div class="inputWithIcon">
            <input ng-model='value' ng-change='onChange()'>
            <i class="icon ion-edit"></i>
         </div>',
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return;
        scope.onChange = function() {
          ngModel.$setViewValue(scope.value);
        };

        ngModel.$render = function() {
          scope.value = ngModel.$modelValue;
        };
      }
    };
  });

使用指令：

<editable-input ng-model="phone" value={{accountData.phone}}></editable-input>

我在收到HTTP get请求后收到accountData.phone。然后我想将它作为初始值存储在指令中并指示更改。

例如：

来自HTTP GET的值：123456＆lt; - 这是原始的

编辑后的值：1234567＆lt; - 与初始值不同，请指明它（例如应用蓝色背景etz。）

编辑后的值：123456＆lt; ---与初始值相同，所以不要指出

如何实现？感谢您的帮助。

Answer 1

如果您在更改后不需要初始值，则ng-model内置了处理此功能的功能。

例如，当ng-model指令应用于输入字段时，当值与最初应用于输入框的值不同时，myForm.fieldName.$dirty变为true。

除此之外，类ng-dirty已应用于控件，因此您可以相应地设置CSS样式（例如，应用蓝色背景）。

还有其他州，例如$pristine，$touched等。

有关详细信息，请参阅https://docs.angularjs.org/api/ng/directive/ngModel。

希望这有帮助。

AngularJS-在指令中存储初始值

1 个答案: