Question

我有一个文本框，我想在文本框中输入特定值时隐藏文本框值。

对于例如： - 当我输入-1时，该值应该隐藏在文本框中，但它应该存在于ng模型中。

如何实现此功能。

 <input type="text" id ='xyz' ng-model="model"/>

JSFiddle

Answer 1

更新

请尝试使用后-1

angular.module("test",[]).controller("testc",function($scope) {
 
 $scope.hideValue = function(value) {   
  if (value) {
   $scope.realModel = value.toString().replace("-1","");
  }
 }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<input type="text" id ='xyz' ng-model="realModel" ng-change="hideValue(realModel)"/>

</div>

如果您想删除负值，请尝试此

angular.module("test",[]).controller("testc",function($scope) {

$scope.hideValue=function(value) {   
  if (value) {
    var text =  value.substr(value.length - 2);
    if(parseInt(text) <= 0) {
      $scope.realModel = value.toString().replace(text.toString(),"");
    }
  }
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<input type="text" id ='xyz' ng-model="realModel" ng-change="hideValue()"/>

</div>

但由于two way binding，您无法保留旧值。所以你可能需要用temp变量写一些逻辑。

Answer 2

我认为这不是您正在寻找的解决方案。但是，这是一个看起来像你想要的黑客。基本上，您更改了CSS，因此使用ng-style隐藏负值。这是一个简单的演示：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myModule">
<div ng-controller="myController">
    <input type="text" ng-model="model" ng-change="check()" ng-style="{color: myColor}"/>
  </div>
</div>

<script>
var module = angular.module("myModule", []);
module.controller('myController', ['$scope', function($scope) {
  $scope.model = '2';
  $scope.myColor = "black";
  $scope.check = function(){
    if($scope.model<0){
    	$scope.myColor = "white";
    }else{
    	$scope.myColor = "black";
    }
  }
}]);
</script>

</body>
</html>

您正在寻找的解决方案包括删除和保存具有大量复杂逻辑的数字。您需要使用angular.copy($scope.model) iff -1保存该值，并清除当前模型，直到显示正数。要重新使用保存的值，只需参考其副本而不是实际模型。

以下是我对这个复杂版本的尝试：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myModule">
    <div ng-controller="myController">
      <input type="text" ng-model="model" ng-change="check()" />
      <br>{{model}}
      <br>{{copy}}
    </div>
  </div>

  <script>
    var module = angular.module("myModule", []);

    module.controller('myController', ['$scope', function($scope) {
      $scope.model = '2';
      $scope.myColor = "black";
      $scope.check = function() {
        $scope.save($scope.model);
        if ($scope.model < 0) {
          $scope.model = "";
        }
      }
      $scope.save = function(val) {
        $scope.copy = angular.copy(val);
      }
    }]);
  </script>

</body>

</html>

Answer 3

您可以使用 $ scope。$ watch（'model'，function（）{}）或 ng-change =“funciton（）”来检查后的值编辑ng-model！

是否可以隐藏文本框值

3 个答案:

更新

如果您想删除负值，请尝试此