查看我的 PLNKR ，目前一切都是硬编码的，即菜单项的数量固定为 10，currentMargin。但根据要求，可以有“n”个可水平滚动的菜单项。我试图让它可配置，但不能作为 Angular 的新手。
所以这里是我想要实现的事情:
- 只有当我的菜单项超过 3 个时，“向左移动”和“向右移动”按钮才应该可见。
- 使其可配置，可以有 'n' 个菜单项。
- 当到达前 3 个“向左移动”按钮时将被禁用。
- 当到达最后 3 个“向右移动”按钮时将被禁用。
- 使菜单项的左右移动更加顺畅。
请参阅上面给出的 plnkr 链接以查看它的实际效果。 这是我的代码， HTML 代码
<div ng-controller="scrollController">
<input ng-click="myStyle={'margin-left': moveLeft()}" ng-disabled="leftdisabled" class="left" type="button" value="Move Left" />
<div class="menucontainer left">
<ul ng-style="myStyle">
<li> <a href="#">111</a>
</li>
<li> <a href="#">222</a>
</li>
<li> <a href="#">333</a>
</li>
<li> <a href="#">444</a>
</li>
<li> <a href="#">555</a>
</li>
<li> <a href="#">666</a>
</li>
<li> <a href="#">777</a>
</li>
<li> <a href="#">888</a>
</li>
<li> <a href="#">999</a>
</li>
<li> <a href="#">000</a>
</li>
</ul>
</div>
<input ng-click="myStyle={'margin-left': moveRight()}" ng-disabled="rightdisabled" class="left" type="button" value="Move Right" />
</div>
Angular JS
var app = angular.module('app', []);
app.controller('scrollController', function($scope) {
$scope.myStyle = {
'margin-left': '0px'
};
$scope.moveRight = function() {
var marginLeft = +$scope.myStyle['margin-left'].replace('px', '') + -100;
if (marginLeft === 0) {
$scope.leftdisabled = true;
}
else{
$scope.leftdisabled = false;
}
if (marginLeft === -700) {
$scope.rightdisabled = true;
}
else{
$scope.rightdisabled = false;
}
$scope['margin-left'] = marginLeft + 'px';
document.getElementById('infoMargin').innerHTML=marginLeft;
return $scope['margin-left'];
}
$scope.moveLeft = function() {
var marginLeft = +$scope.myStyle['margin-left'].replace('px', '') + 100;
if (marginLeft === 0) {
$scope.leftdisabled = true;
}
else{
$scope.leftdisabled = false;
}
if (marginLeft === -700) {
$scope.rightdisabled = true;
}
else{
$scope.rightdisabled = false;
}
$scope['margin-left'] = marginLeft + 'px';
document.getElementById('infoMargin').innerHTML=marginLeft;
return $scope['margin-left'];
}
})
最佳答案
试试这个。我做了一些改变。
http://plnkr.co/edit/Hxut4UgN0d3pMeBbSbzl?p=preview
更新(<= 3 个菜单按钮将隐藏):http://plnkr.co/edit/LdVLubl1DKtij4KMWoHd?p=preview
代码:
索引.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="scrollController" >
<input ng-click="myStyle={'margin-left': moveLeft()}" ng-disabled="leftdisabled" class="left" type="button" value="Move Left" />
<div class="menucontainer left">
<ul ng-style="myStyle">
<li ng-repeat="item in items"> <a href="#">{{item.name}}</a>
</li>
</ul>
</div>
<input ng-click="myStyle={'margin-left': moveRight()}" ng-disabled="rightdisabled" class="left" type="button" value="Move Right" />
<br>
<br>
<br>
<br>
<p style="float:left;">Current Margin :</p>
<p style="float:left;" id="infoMargin"></p>
<br>
<br>
<p>If current Margin reaches to -700 it I am disabling 'MoveRight"' and if it reaches to Zero i am disabling 'MoveLeft' button.</p>
<p><b>Need help to make it configurable as currently every thing is hardcoded, there can be 'n' number of menuitem.</b></p>
</div>
</body>
</html>
脚本.js
//代码在这里
var app = angular.module('app', []);
app.controller('scrollController', function($scope) {
$scope.myStyle = {
'float':'left',
'margin-left': '0px',
'display':'block'
};
var items = [];
$scope.items = [{name:"111",age:25},{name:"222",age:25},{name:"333",age:25},{name:"444",age:25},{name:"555",age:25},{name:"666",age:25}];
$scope.moveRight = function() {
var marginLeft = +$scope.myStyle['margin-left'].replace('px', '') + -100;
if (marginLeft === 0) {
$scope.leftdisabled = true;
}
else{
$scope.leftdisabled = false;
}
if (marginLeft === -(($scope.items.length-3)*100)) {
$scope.rightdisabled = true;
}
else{
$scope.rightdisabled = false;
}
$scope['margin-left'] = marginLeft + 'px';
document.getElementById('infoMargin').innerHTML=marginLeft;
return $scope['margin-left'];
}
$scope.moveLeft = function() {
var marginLeft = +$scope.myStyle['margin-left'].replace('px', '') + 100;
if (marginLeft === 0) {
$scope.leftdisabled = true;
}
else{
$scope.leftdisabled = false;
}
if (marginLeft === -700) {
$scope.rightdisabled = true;
}
else{
$scope.rightdisabled = false;
}
$scope['margin-left'] = marginLeft + 'px';
document.getElementById('infoMargin').innerHTML=marginLeft;
return $scope['margin-left'];
}
})
关于html - 使用 Angular 制作可配置的水平滚动菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25257236/