Question

我有一个输入，当空文本时需要将颜色显示为白色背景。当字段内的文字想要显示黄色背景时。

这里有一些基本的JS代码可以看到参考文献

jsfiddle.net/2Xgfr/87/

它必须适用于多个输入字段

先谢谢。

Answer 1

使用ng-class + css的简短方法：

HTML 的

<div ng-controller="Controller">
     <div class='form-group'>
   <label>Field 1</label>
  <input type='text'  
         ng-class="{true: 'c2', false:'c1'}[f1.length > 0]" 
         ng-model='f1'
         >
 </div>
</div>

CSS

.c1{background: white;}
.c2{background: yellow;}

演示1 Plunker

使用ng-style

的简短方法

（我建议这个）

仅限HTML

<div ng-controller="Controller">
     <div class='form-group'>
   <label>Field 1</label>
  <input type='text'  
         ng-style="{true: {background: 'yellow'}, false: {background: 'white'}}[f1.length > 0]" 
        ng-model='f1'
        >
 </div>
</div>

演示2 Plunker

$ watch + ng-style

您可以使用ng-style和$watch来管理颜色样式。

<强> JS

var app = angular.module('form-example1', []);

app.controller("Controller", ['$scope', function($scope){

  $scope.mystyle = {
    background: 'white'
  };

  $scope.$watch('f1', function () {
    if($scope.f1.length > 0){
       $scope.mystyle.background = 'yellow';
    }
    else{
      $scope.mystyle.background = 'white';
    }
});
}]);

<强> HTML

<div ng-controller="Controller">
     <div class='form-group'>
   <label>Field 1</label>
  <input type='text' ng-model='f1' ng-style="mystyle">
 </div>

演示3 Plunker

作为旁注：

使用DOM操作/更新到控制器

是不好的做法

如何在Angular中检查字段或取消选中字段

1 个答案: