Question

我想在使用ng-focus选择时突出显示输入字段。我看过一些例子，但找不到适合我的例子。

问题是，当我选择一个输入字段时，不仅会突出显示该输入，还会突出显示它们。

如何通过个人结果来实现这一目标？

<label class="item item-input item-dark">
                <span class="input-label">Make</span>
                <input type="text" ng-model="M1" ng-required ng-style="style" ng-focus="style={'background-color':'#387ef5'}" ng-blur="style={}">
            </label>
            <label class="item item-input item-dark" >
                <span class="input-label">Model</span>
                <input type="text" ng-model="M2" ng-required ng-style="style" ng-focus="style={'background-color':'#387ef5'}" ng-blur="style={}">
        </label>

Answer 1

当您一次关注其中一个输入时，将设置style变量。由于两个输入都使用ngStyle指令和相同的变量（style），因此它们都具有这种风格。所以你必须在这里使用不同的变量。

但我还是建议你在这里使用CSS选择器。只需给他们两个像input-focus这样的类：

.input-focus:focus{
    background-color:#387ef5;
 }

Answer 2

看到这个小提琴：

http://jsfiddle.net/2o0mym3y/1/

它包含实际更新变量和样式的样式。因此他们都得到了相同的价值。

＆安培;正确的方式。只使用焦点（伪选择器）＆amp;一种正常的风格。

.stylea:focus {
  background-color:#387ef5;
}

Answer 3

 
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.foucsfun=function(){
   $scope.apply=true;
 
      }
       $scope.foucsRemfun=function(){
      $scope.apply=false   
    
      }
       });

       .focusColor{
      background-color:#387ef5;
    }

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="personCtrl">
<label class="item item-input item-dark">
                <span class="input-label">Make</span>
                <input type="text" ng-model="M1" ng-required ng-style="style" ng-class="{'focusColor':apply}" ng-focus="foucsfun()" ng-blur="foucsRemfun()">
            </label>
            
  </body>
  </html>

angularjs ng-focus多个字段

3 个答案: