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

时间：2015-11-02 15:44:47 阅读：1852 评论：0 收藏：0 [点我收藏+]

<!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>

原文：http://www.cnblogs.com/rysly/p/selectedrow.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)