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
  • 相关阅读:
    docker安装和hub
    sql获取时间、年龄
    在eclipse中配置Tomcat时,出现“Cannot create a server using the selected type”的错误。
    ajax简单做html查询删除(鲜花)
    java使用jsp建立项目+视频
    java根据数据库自动生成代码
    java连接数据库增删改查公共方法
    制作二维码java
    富文本编译器
    java字符串类型和时间类型的转换
  • 原文地址:https://www.cnblogs.com/zhumeiming/p/9820437.html
Copyright © 2011-2022 走看看