我对AngularJs有点新意,所以我遇到了问题。 让我解释一下我想要实现的目标。
我设计了两个带有子和父关系的 div 。
android {
sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
}
}
defaultConfig {
applicationId = doExtractStringFromManifest("package")
}
packagingOptions {
exclude 'META-INF/LICENSE'
exclude 'META-INF/rxjava.properties'
}
}
当我将鼠标悬停或移动到父 div 上时,隐藏/显示 相应的子 div 。
但是我的代码在悬停时隐藏/显示子 div 的内容。我在代码中需要做哪些更改?
查看完整代码
// first parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
// second parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
此代码的控制器,见下文
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()" style="background-color:pink">
<span >Parent one</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()">
<span >Parent two</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
Css文件
var app = angular.module("app", []);
app.controller("headerController",function($scope){
$scope.hoverIn = function(){
this.showMe = true;
};
$scope.hoverOut = function(){
this.showMe = false;
};
});
答案 0 :(得分:1)
您必须更改函数的名称,因为两个div都使用相同的函数并更改相同的属性showMe
。
<强> HTML 强>:
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink">
<span>Parent one</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)">
<span>Parent two</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
<强> JS 强>:
$scope.showMe=[];
$scope.hoverIn = function(id) {
$scope.showMe[id] = true;
};
$scope.hoverOut = function() {
$scope.showMe[id] = false;
};