Question

这是我的JSON数据

data = {
    name: 'paul',
    author: '',
    country: '',
    id: 7465
};

在这里，通过使用以上数据，我将显示输入和标签

 <label class="inline-label" for="{{data.name}}">{{data.name}}</label>

输入

<input id="{{data.name}}" type="{{data.details.type}}" style=" border-radius:0;" class="form-control error">

我的问题是

当输入值仅对选定的一个为空时，我无法根据条件显示输入背景色。我有其他输入，也基于我不想更改的其他输入。

下面是我尝试过的代码

if (data['author'] === '') {
    $('.error').css('background-color', '#fff');
    $('.error')
        .filter(function() {
            return $.trim(this.value) === '';
        })
        .css('border-bottom:', '1px solid #FF0000 !important');
} else {
    $('.error').css({ 'background-color': 'green' });
}

Answer 1

不确定这是否是您要查找的内容，但是您可以在某些情况下根据以下条件更改输入字段的背景颜色：

StackBlitz示例：Change background based on condition

HTML文件：

<label class="inline-label" for="{{data.name}}">{{data.name}}</label>

<input [(ngModel)]="input" name="input" type="text" id="{{data.name}}" [class.inputColor]="input">

TS文件：

export class AppComponent  {
  name = 'Angular';

  input;

   data = {
    "name":'paul',
    "author":'',
    "country":'',
    "id":7465 ,
  }
}

CSS文件：

.inputColor {
  background-color: blue;
  caret-color: white;
  color: white;
}

在这种情况下，当输入字段不为空时，背景颜色变为蓝色，字母变为白色。

对于第二个问题，如何检查对值对象中的值字段是否为空，您可以执行以下操作：

  object = {
    key: 'A',
    value: ''
  }

  isValueEmpty(object) {
    if (!object.value) return true;
    else return false;
  }

Answer 2

如果名称像空字符串一样虚假，请尝试将此输入背景色设为红色

<input type="text" [(ngModel)]="name" [ngStyle]="{'background-color': !name ?'#f00' : '#fff'}" />

检查作者的财产

<input type="text" [(ngModel)]="data.author" [ngStyle]="{'background-color': !data.author ?'#f00' : '#fff'}" />

我建议您使用角度形式，您可以轻松设置无效输入的样式，并且不要使用jQuery

stackblitz

Answer 3

您可以使用Angular的ngClass绑定来实现。

数据示例（.ts服务文件返回可观察的数据）：

  public items = [
    { "name":'paul', "author":'  ', "country":'', "id":7465 },
    { "name":'Jibin', "author":'JQuery', "country":'', "id":7466 }
  ];

控制器示例（.ts文件以映射另一个标志字段）：

import 'rxjs/add/operator/map';

public items = [];
private unsubData = new Subject<void>();

ngOnInit() {
    this.service.dataUpdated
    .takeUntil(this.unsubData)
    .map((data: any) => {
      data.forEach(element => {
        element.flgEmpty = (element['author'].trim() === '') ? true : false;
      });
      return data;
    })
    .subscribe((data: any) => {
      console.log(data);
      this.items = data;
    });
}

ngOnDestroy() {
    this.unsubData.next();
    this.unsubData.complete();
}

HTML示例（.html文件）：

<div *ngFor="let item of items">
  <label class="inline-label" for="{{item.name}}">{{item.name}}</label>
  <input id="{{item.name}}" type="text" [ngClass]="[item.flgEmpty ? 'form-control error' : 'form-control success']">
</div>

CSS示例（.css文件）：

.form-control { border-radius:0;}
.error {border-bottom: 1px solid #FF0000;}
.success {background-color: green;}

Answer 4

您可以使用不包含jquery的类似内容

        $xx_val = (string) $xx;
        $sql = "INSERT INTO attributes (article) VALUES ($xx_val)";
        if ($conn->query($sql) === TRUE) {
            echo "\n\n### DONE ###\n\n";}
        else {
            echo "\n\n### ERROR ###" . $sql . "\n" . $conn->error . "\n\n";}

    +-----+-----------+------------+--------+----------+-----------+-------------+
    | id  | article   | attr1      | attr2  | attr3    | attr4     | attr5       |
    +-----+-----------+------------+--------+----------+-----------+-------------+
    | 001 | XYZ1      | NULL       | NULL   | NULL     | NULL      | NULL        |
    | 002 | XYZ2      | NULL       | NULL   | NULL     | NULL      | NULL        |
    | 003 | XZY1      | NULL       | NULL   | NULL     | NULL      | NULL        |
    | 004 | XZY2      | NULL       | NULL   | NULL     | NULL      | NULL        |
    | 005 | 8997451   | NULL       | NULL   | NULL     | NULL      | NULL        |
    +-----+-----------+------------+--------+----------+-----------+-------------+

无法根据条件更改输入背景

4 个答案: