问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

给li标签添加ng-repeat='x in provinceArr' 后，鼠标移入移出不起作用怎么回事啊？

头像
送翔
    276106183

    给li标签添加ng-repeat指令后，ng-mouseenter="show = true" ng-mouseleave="show = false"居然不起作用，为什么啦？求解？代码如下：
    <ul class="im-dropdown-ul">

        <li ng-repeat='x in provinceArr' ng-mouseenter="show = true" ng-mouseleave="show = false"><span><input type="checkbox"><span>{{x}}</span></span></li>
</ul>
<div ng-show="show">Hello!</div>
    angularjsjavascript
    阅读 3.2k
    3 个回答
    得票最新
    头像
    linong
      29.2k1266132

      把事件绑出去吧，绑到ul上;

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="customersCtrl">
    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope) {
        $scope.provinceArr = ['Jani','Hege','Kai'];
        $scope.show = false;
        $scope.count = 0;
    });
    </script>
    {{provinceArr}}
    <ul class="im-dropdown-ul" ng-mouseenter="count = count + 1;show = !show">
        <li ng-repeat='x in provinceArr'>
            <span>
                <input type="checkbox">
                <span>{{x}}</span>
            </span>
        </li>
    </ul>
    show{{show}}
    <br>
    count{{count}}
    <div ng-show="show"  ng-click="console.log(3)">Hello!</div>
</body>
</html>

      clipboard.png

      clipboard.png

      clipboard.png

      头像
      有个菜
        179117

        我猜,你应该是controller里木有写$scope.show

        .........

        你把ng-mouseenter换成ng-mouseover

        好吧,我试了一下,在li ng-repeat中的直接ng-click,ng-mouseenter,ng-mouseleave指令后直接跟表达式的话,是没有执行的. 指令后写方法就可以.

        再来,上测试代码

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in records track by $index" ng-mouseenter="show()" ng-mouseleave="hide()">{{item}}</li>
    </ul>
    <p ng-show="obj.show">test li ng-repeat directive {{obj.count}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "菜鸟教程1",
    "菜鸟教程2",
    "菜鸟教程3",
    "菜鸟教程4",
  ];
  var obj = {
        show: false,
        count: 0
  };
  $scope.show = function(){
      obj.show = true;
    obj.count++;
  }
  $scope.hide = function(){
    obj.show = false;
  }
  $scope.obj = obj;
});
</script>

</body>
</html>

        进这里,你测试一下

        头像
        crazy4x
          9251211

          作用域的问题

          controller：

          $scope.data={
    show:false;
    provinceArr[1,2,3,4,5]
}

          HTML:

          <ul class="im-dropdown-ul">
    <li ng-repeat='x in data.provinceArr' ng-mouseenter="data.show = true" ng-mouseleave="data.show = false">
        <span><input type="checkbox"><span>{{x}}</span></span>
    </li>
</ul>
<div ng-show="data.show">Hello!</div>

          以上

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题