2

デザインフレームワークとして角度のある素材を使用しています。Web サイトのフォーム フィールドのプロトタイプを作成していますが、フォーム フィールドにはアイコンがあります。フォーム フィールドを選択すると、アイコンの色が変わり、選択されていることが示されます。

私の質問は、1 つのアイコンに対応する 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 を見なければ、2 つのmd-input-container要素があり、最初の要素にはアイコンが含まれていると思います。そのため、最初の入力フィールドに注目すると青に変わります。あなたはまだあなたが望むものを達成することができますが、focus/ blur2番目の入力フィールドのときにアイコンに同じCSSを手動で追加する必要があります.

編集：コードを見た後、基本的に私が上に持っているもの。これを行う 1 つの方法は、スコープ変数を使用し、2 番目の入力フィールドで を使用しng-focus="focusingLastName = true"、1 番目のコンテナー内の要素ng-blur="focusingLastName = false"と組み合わせることです。おそらく、クラスを作成し、Angular Material がデフォルトで追加するのと同じ CSS をコピーする必要があります (単純なルールに過ぎないと確信しています)。ng-classmd-iconcolor

于 2016-05-16T20:06:27.813 に答える