All geek questions in one place

Is it possible to hide the value of a text field

I have a text field and I want to hide the value of the text field when I entered a specific value in the text field.

For example: - when I type -1, the value should be hidden in the text box, but it should exist in the ng-model.

How can I achieve this functionality.

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

Jsfiddle

+4
source share
3 answers

Update

Try this for hind -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>
Run codeHide result

if you want to remove a negative value try this

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>
Run codeHide result

But you cannot keep the old value due two way binding. Therefore, you may need to write some logic with the temp variable.

+3
source

, , . , , . , 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>
Hide result

, , . angular.copy($scope.model) iff it -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>
Hide result
0

$scope. $watch ('model', function() {}) ng-change = "funciton()", ng-model!

0

Source: https://habr.com/ru/post/1693236/

More articles:


All Articles