Question

我在这里做的是当我将鼠标悬停在包装器部分上时，渲染叠加层并单击该叠加层会更改输入边框的CSS并删除输入的只读属性，反之亦然。

我使用AngularJS进行了许多关于动画和DOM操作的谷歌搜索和教程。但我无法在代码段中实现以下效果。实际上我使用javascript和jquery在我的项目中使用了这个效果，现在我想迁移到angular，我发现在角度中进行jquery DOM操作并不是一个好习惯。我无法使用角度来获得此效果。任何人都可以帮助我以棱角分明的方式做到这一点吗？

＆＃13;

$('body').click(function(e){
  e.stopPropagation();
  $('.overlay').fadeIn();
  $('.wrapper input').css('border','none');
  $('.wrapper input').attr('readonly', false)
});

$('.overlay').click(function(e){
  e.stopPropagation();
  $(this).fadeOut();
  $(this).parent().find('input').css('border','1px solid grey');
  $(this).parent().find('input').attr('readonly', false);
  stop();
});


function stop(){
   $('.wrapper input').click(function(e){
      e.stopPropagation();
   });
}

＆＃13;

body{
  height: 100%;
  width: 100%
}

.wrapper{
  position: relative;
}

.wrapper .overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;  
  z-index: 10;
}

.wrapper .overlay:hover{
  background: #000;
  opacity: 0.7;
} 

.wrapper input{
  border: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="overlay"></div>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
</div>

＆＃13;

Answer 1

因此以角度＆lt;触发边界+只读2你需要这个

https://plnkr.co/edit/yHtiIyISidBscAKdCWiQ?p=preview

在这种情况下，我认为你真的不需要任何jQuery DOM操作。

<强> HTML

<div class="wrapper" ng-class="{bordered: bordered}">
  <div class="overlay" ng-click="triggerBorders()" ng-if="!bordered"></div>
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
</div>

<强>角

angular.module('app', [])
  .controller('AppController', AppController);

function AppController($scope) {
  $scope.bordered = false;
  $scope.triggerBorders = function() {
    $scope.bordered = !$scope.bordered;
  }
}

<强>样式

body{
  height: 100%;
  width: 100%
}

.wrapper{
  position: relative;
}

.wrapper .overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;  
  z-index: 10;
}

.wrapper .overlay:hover{
  background: #000;
  opacity: 0.7;
} 

.wrapper input{
  border: none
}

.wrapper.bordered input{
  border: 1px red solid;
}

如何使用AngularJS实现这种悬停效果？

1 个答案: