Question

我使用角度材料作为我的设计框架。我正在为我的网站制作表单字段的原型，表单字段有一个图标。选择表单字段会更改图标的颜色以指示它已被选中。

我的问题是我有两个并排的字段，它们都对应一个图标。我有一个名字和姓氏字段，它们都指向同一个用户图标。

当我选择名字字段时，图标变为蓝色。See screenshot 当我选择姓氏字段时，图标保持灰色。 See Screenshot 如何使用户图标也变为蓝色并选择姓氏字段？

<html>
  <head>


 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.css">
        <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
    
      


</head>

  <body  ng-app="StyleApp">

<div class="group-fields" layout="column" layout-gt-sm="row" layout-md="row">

                            <md-input-container class="md-icon-float" layout="row" flex-gt-sm>
                                <label>First Name</label>
                                <md-icon class="material-icons md-18 color-txt-gray">person</md-icon>
                                <input ng-model="user.firstname">
                            </md-input-container>

                            <md-input-container class="" flex-gt-sm>
                                <label>Last Name</label>
                                <input ng-model="user.lastname">
                            </md-input-container>

                        </div>
    
          <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
     <script>
            angular.module('StyleApp', ['ngMaterial']);

        </script>

  </body>
  </html>

Answer 1

如果没有看到HTML，我猜你会有两个md-input-container元素，第一个元素中有图标，这就是为什么当你专注于第一个输入字段时它会变成蓝色的原因。您仍然可以实现您想要的效果，但是当您focus / blur第二个输入字段时，您必须手动将相同的CSS添加到图标中。

编辑：看到代码后，基本上就是我上面的内容。一种方法是使用范围变量，并在第二个输入字段上使用ng-focus="focusingLastName = true"，ng-blur="focusingLastName = false"与第一个容器中的ng-class元素上的md-icon结合使用。您可能必须创建一个类，并且只复制Angular Material默认添加的相同CSS（我很确定它只是一个简单的color规则）。

如何将图标应用于Angular Material中的两个表单域？

1 个答案: