angularjs----实现切换,显示隐藏,选中一行不是table

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>angular demo</title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"></script>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your demo</h1>
        <!-- demo 1 -->
        <div ng-show='menuState.show'>another another another</div>
        <button ng-click="test2()">切换</button>
        <hr><!-- demo 2 -->
        <style type="text/css">
            .menu-disabled-true{
                opacity:1;
                color: red;
                -webkit-transition:all 1000ms linear;
                -moz-transition:all 1000ms linear;
                -o-transition:all 1000ms linear;
            }
            .menu-disabled-false{
                opacity: 0;
                -webkit-transition:all 1000ms linear;
                -moz-transition:all 1000ms linear;
                -o-transition:all 1000ms linear;
            }
        </style>
        <div class="menu-disabled-{{isDisabled}}">adfadfadasda</div>
        <button ng-click="test()">隐藏</button>
        <button ng-click="test1()">显示</button>
        <button ng-click="test11()">切换</button>
        <hr><!-- demo 3 -->
        <style type="text/css">
        .error {
            background-color: red;
        }
        .warning {
            background-color: yellow;
        }
        </style>
        <div ng-class='{error:isError, warning:isWarning}'>{{messageText}}</div>
        <button ng-click="showError()">error</button>
        <button ng-click="showWarning()">warning</button>
        <hr><!-- demo 4 -->
        <style type="text/css">
            .selected{
                background-color: lightgreen;
            }
        </style>
        <div ng-repeat="item in items" ng-class='{selected:$index==selectedRow}' ng-click='selectedWhich($index)'>
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
        </div>
    </div>
    <script>
        var shoppingCartModule = angular.module("shoppingCart", [])
        shoppingCartModule.controller("ShoppingCartController",
            function ($scope) {
                // demo 1
                $scope.menuState = {'show':true};
                $scope.test2 = function () {
                    $scope.menuState.show = !$scope.menuState.show;
                };
                // demo 2
                $scope.isDisabled = true;
                $scope.test = function () {
                    $scope.isDisabled = 'false';
                };
                $scope.test1 = function () {
                    $scope.isDisabled = 'true';
                };
                $scope.test11 = function () {
                    $scope.isDisabled = !$scope.isDisabled;
                };
                // demo 3
                $scope.isError = false;
                $scope.isWarning = false;
                $scope.messageText = 'default, default';
                $scope.showError = function () {
                    $scope.messageText = 'This is an error';
                    $scope.isError = true;
                    $scope.isWarning = false;
                };
                $scope.showWarning = function () {
                    $scope.messageText = 'Just a warning, donot warry';
                    $scope.isWarning = true;
                    $scope.isError = false;
                };
                // demo 4
                $scope.items = [
                    { product_name: "Product 1", price: 50 },
                    { product_name: "Product 2", price: 20 },
                    { product_name: "Product 3", price: 180 }
                ];
                $scope.selectedWhich = function (row) {
                    $scope.selectedRow = row;
                }
            }
        );
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/rysly/p/selectedrow.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值