Question

检查我的PLNKR，目前所有内容都是硬编码的，即菜单项的数量是固定的10，currentMargin。但是根据要求，可能会有＆＃39; n＆＃39;可以水平滚动的menuitem的数量。我试图让它可配置但不能成为Angular的新手。

以下是我想要实现的目标：

＆＃39; MoveLeft＆＃39; ＆安培; ＆＃39; MoveRight的＆＃39;仅当我的Menuitem超过3时，该按钮才可见。
使其可配置，可以有＆＃39; n＆＃39; menuitem的数量。
到达前3＆＃39; MoveLeft＆＃39;按钮将被禁用。
到达最后3＆＃39; MoveRight＆＃39;按钮将被禁用。
使菜单项的左右移动更加顺畅。

请参阅上面给出的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'];
}

})

Answer 1

试试这个。我做了一些改变。

http://plnkr.co/edit/Hxut4UgN0d3pMeBbSbzl?p=preview

更新（使用＆lt; = 3菜单按钮将隐藏）：http://plnkr.co/edit/LdVLubl1DKtij4KMWoHd?p=preview

代码：

的index.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>

的script.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'];
  }

})

Answer 2

编辑：正如AngularHarsh所示，在处理JSON数据时最好使用Angular。

通常，在使用Angular处理项目列表时，您可以将其用于JSON数据。这使得使用Angular更容易隐藏，显示，过滤和动画数据。但要实现您想要实现的目标：

要仅在列表中有超过3个项目时显示moveLeft和moveRight按钮，首先Angular需要知道列表中有多少项目。我们可以通过将其设置为范围变量来实现此目的（我只需将$scope.menuItems = 10;放在控制器的顶部，或者$scope.menuItems = $("myList li").length();如果您不想要硬编码的数字。通常这只是设置为收到的JSON数据的长度）。

现在Angular知道列表中有多少项，通过$ scope.menuItems变量，我们需要告诉HTML只显示超过3项时的那些按钮。我们可以使用Angular的ng-show属性来完成此操作。我们这样使用它：
```
<input ng-show="menuItems > 3" />
```
请注意，在HTML中使用范围变量时，我们不需要编写$ scope.menuItems。
使项目数量可配置，使用上面编写的代码时，默认情况下会得到这个。同样，使用JSON使这更容易，但是如果你只是从html中读取元素，找到HTML中编写的列表项的数量，通过范围变量告诉angular，并在HTML中使用你需要它的范围变量
当您一直到左边时，禁用MoveLeft按钮。好的，你已经实现了这一点，但你这样做的方式意味着Angular只会知道你在按下 MoveLeft之后一直到左边（在你的moveLeft和moveRight里面你的功能）执行检查）。您应该做的是确保在加载页面时运行代码。您可以通过将检查代码放在控制器内来完成此操作。

禁用MoveRight按钮，见上文。

使动作更平滑。我猜你的意思是动画？那么你现在设置它的方式与我通常的方式有点不同。您的项目列表基本上始终在页面上，但显示的部分将根据其边距位置显示。我通常会隐藏（使用display：none;或使用angular的ng-show / ng-hide）我不想看到的列表项。 Angular有一些动画功能，可以根据元素何时进入或退出视图而运行，您可以在此处阅读：http://www.nganimate.org/

我对您的PLUNKR进行了更新，通过检查页面加载时的列表位置（上面的数字3和4）来显示我的意思，并显示如何使用ng-show（上面的数字1）。 http://plnkr.co/edit/MJwDhfrO9benr9PU2tHb?p=preview

使用Angular制作可配置的水平滚动菜单

2 个答案: