Question

假设我有一个输入，如下：

<input ng-model="myinput" />

我希望它在页面加载/渲染时显示默认值Hello，但不要触摸myinput。

我不能使用占位符，因为我希望用户能够编辑hello的默认值。一旦用户更改了默认值，则该更改应反映在myinput。

中

有人有什么想法吗？

编辑：对于上下文，这些输入字段默认值是用户保存的项目页面上显示的设置。如果将默认值保存到模型并更新项目，则该默认值会保留。这意味着，如果他们更改了设置，那么该项目将没有新的设置值。仅当用户明确更改了字段时，才应将该数据保存到项目中。

Answer 1

如果我理解正确，一种方法就是这样：

    $scope.myinput= '';
    $scope.tempVal = "some default value";

    $scope.$watch('tempVal', function(newValue, oldValue) {
        if (newValue != "some default value") {
            $scope.myinput= newValue;
        }
    });

在html中：

<input type="text" ng-model="tempVal" />

对输入使用临时变量，并且仅当值不是默认值时更改myinput

注意：您确定不想在变量中保存默认值吗？我发现很难想象一个不是最佳方法的用例。你能描述一下你的用例吗？

Answer 2

在控制器内初始化myinput：

的JavaScript

app.controller('ctrl', function($scope) {
    $scope.myinput = 'hello';
});

HTML

<div ng-controller='ctrl'>
    <input ng-model="myinput" />
</div>

Answer 3

我根据我对要求的理解编写了一个指令，希望它可以提供帮助： https://jsfiddle.net/tm5yv4Lk/

  angular.module('myApp',[])
  .controller('MainController', ['$scope', function($scope) {
    $scope.myinput = 'my text';
    $scope.myFakeInput = 'fake text';
  }])
  .directive('inputMask', ['$timeout', function($timeout) {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        inputMask: '='
      },
      link: function(scope, element, attrs, ctrl ) {
        $timeout(function() {
          element[0].value = scope.inputMask;
        }, 0);
      }
    };
  }]);

HTML：

<input ng-model="myinput" input-mask="myFakeInput"/>

在字段中显示值但不保存到模型

3 个答案: