下拉列表如何使用angular选择默认值

时间:2015-06-22 20:28:01

标签: javascript css angularjs html5

我通过以下方式创建了一个下拉列表:

 <li>
    <a href="#" 
    ng-click="check(default)">defaul_label</a>
</li>

并且只是造型所以它很好地下降,所以我的所有项目都很好。

如果不使用选择字段,如何指定哪些链接将被“选中”以显示为默认选定项?

1 个答案:

答案 0 :(得分:0)

您可以使用ng-class指令在所选项目上设置“有效”类。在ng-click中,您可以使用$index指令中的ng-repeat值设置有效索引。

HTML

<li ng-repeat="item in items" ng-class="{active:activeIndex === $index}">
  <a href="" ng-click="setActiveIndex($index)">{{item}}</a>
</li>

JS

app.controller('MainCtrl', function($scope) {
  $scope.activeIndex = 0;
  $scope.items = [
    "One",
    "Two",
    "Three",
    "Four"
  ];

  $scope.setActiveIndex = function(idx) {
    $scope.activeIndex = idx;
  };
});

Here is a codepen