angularjs实现选项卡实例

注意:事件、循环、赋值在一起就出错

错误实例:

<!DOCTYPE html>
<html ng-app="tab_switch">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .box input {background:#CCC}
    .box input.active {background:yellow}

    .box div {width:200px;height:200px;background:#CCC;border:1px solid black;display:none}
    .box div.cur {display:block}
    </style>
    <script src="angular.js" charset="utf-8"></script>
    <script>
    let mod=angular.module('tab_switch', []);

    mod.controller('test', function ($scope){
      $scope.now=0;
      $scope.items={
        '按钮1': 'dfsdffgsdg',
        '按钮2': '45terggf',
        '按钮3': 'redr67567t'
      }
    });
    </script>
  </head>
  <body ng-controller="test">
    <div class="box">
      <input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?'active':''}}" ng-click="now=$index">
      <div ng-repeat="v in items" class="{{$index==now?'cur':''}}">{{v}}</div>
    </div>
  </body>
</html>

正确实例:

具体实现:

<!DOCTYPE html>
<html ng-app="test">

<head>
    <title>选项卡实例</title>
    <script src="js/angular.js" charset="utf-8"></script>
    <style type="text/css">
        .box button{
            background-color: #ccc;
        }
        .box button.active{
            background-color: pink;
        }
        .box div{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border:1px solid black;
            display: none;
        }
        .box div.cur{
            display: block;
        }
    </style>
    <script type="text/javascript">
    let mod = angular.module('test', []);
    mod.controller('main', function($scope) {
        $scope.now = 0;
        $scope.item = {
            '按钮1': '111111',
            '按钮2': '222222',
            '按钮3': '333333',
            '按钮4': '444444',
        };
        $scope.setNowFun=function(index){
            $scope.now=index;
        }
        // 事件、循环、赋值在一起就出错
    });
    </script>
</head>

<body ng-controller="main">
    <div class="box">
        <button ng-repeat="(k,v) in item" class="{{$index==now?'active':''}}" ng-click="setNowFun($index)">{{k}}</button>
        <div ng-repeat="v in item" class="{{$index==now?'cur':''}}">{{v}}</div>
    </div>
</body>

</html>
原文地址:https://www.cnblogs.com/yingzi1028/p/8963569.html