2

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

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

当我选择名字字段时，图标变为蓝色。查看屏幕截图 当我选择姓氏字段时，图标保持灰色。请参阅屏幕截图 如何使用户图标在选择姓氏字段的情况下也变为蓝色？

<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>

4

1 回答 1

0

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

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

于 2016-05-16T20:06:27.813 回答