zoukankan      html  css  js  c++  java
  • angularjs中的选项卡实例

    angularjs中的bug
    ng-click,赋值,ng-repeat三个一起用会有bug


    一个angularjs的选项卡
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>angularjs中的选项卡</title>
        <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
      
        <style>
              .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>
    </head>
    
    <!--angularjs中的bug
    ng-click,赋值,ng-repeat三个一起用会有bug-->
    <body ng-app="tab_switch">
        <div ng-controller="test">
            <div class="box">
                <input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?'active':''}}" ng-click="setNow($index)" />
    
    
                <!--angularjs中的bug
        ng-click,赋值,ng-repeat三个一起用会有bug-->
                <!--<input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?'active':''}}" ng-click="now=$index" />-->
    
                <div class="{{$index==now?'cur':''}}" ng-repeat="v in items">
                    {{v}}
                </div>
    
            </div>
        </div>
    
        <script type="text/javascript">
            let mod = angular.module("tab_switch", []);
            mod.controller("test", ["$scope", function ($scope) {
                $scope.now = 0;
                $scope.items = {
                    "按钮1": "ssssds",
                    "按钮2": "ddddd",
                    "按钮3":"fffff"
                };
    
    
                $scope.setNow = function (num) {
                    $scope.now = num;
                }
                   
            }]);
        </script>
    
    </body>
    </html>
    sometimes the hardest part isn't letting go,but rather start over
  • 相关阅读:
    CentOS查看CPU信息、位数、多核信息
    Linux常用命令大全
    chmod命令详细用法
    tar命令的详细解释
    yum和rpm命令详解
    LeetCode 241. Different Ways to Add Parentheses
    LeetCode 139. Word Break
    LeetCode 201. Bitwise AND of Numbers Range
    LeetCode 486. Predict the Winner
    LeetCode 17. Letter Combinations of a Phone Number
  • 原文地址:https://www.cnblogs.com/zhumeiming/p/9820437.html
Copyright © 2011-2022 走看看