AngularJs练习Demo5

Posted 编程猴子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs练习Demo5相关的知识,希望对你有一定的参考价值。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index5</title>
    <script type="text/javascript" src="~/Scripts/angular.js"></script>
    <style>
        .red {
            background: red;
            color: blue;
        }

        .yellow {
            background: yellow;
        }
    </style>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <div ng-class="{red:s,yellow:true}" ng-cloak>{{text}}</div>
            <div ng-class="{sClass}" ng-cloak>{{text}}</div>
            <div ng-cloak ng-style="{color:‘red‘}"></div>
            <div ng-cloak ng-style="{sStyle}"></div>
            <a href="{{url}}">百度</a><br />
            <a ng-href="{{url}}"></a><br />
            <img src="{{src}}" /><br />
            <img ng-src="{{src}}" /><br />
            <a ng-href="{{url}}" title="百度" ng-attr-title="{{text}}"></a>

            <div ng-show="t">ng-show绑定变量不需要{{}}用的是display的操作</div>

            <div ng-if="t">ng-if是dom级的操作直接删除dom</div>

            <div ng-switch on="t">
                <p ng-switch-default>默认效果</p>
                <p ng-switch-when="false">切换的效果
                 </p>
                <p ng-switch-when="true">
                    切换的效果
                </p>
            </div>
            <div ng-switch on="selection">
                <div ng-switch-when="settings">Settings Div</div>
                <div ng-switch-when="home">Home Span</div>
                <div ng-switch-default>Default</div>
            </div>
            <input type="checkbox" ng-model="open"/>
            <details id="details" ng-open="open">
                <summary>Show/Hide me</summary>
            </details>

        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("firstController", function ($scope) {
            $scope.text = "PhoneGap中文网";
            $scope.s = true;
            $scope.sClass = "{red:true,yellow:true}";
            $scope.sStyle = "{color:‘red‘,background:‘yellow‘}";
            $scope.url = ‘htttp://www.baidu.com‘;
            $scope.src = "";
            $scope.t = true;
            $scope.items = [‘settings‘, ‘home‘, ‘other‘];
            $scope.selection = $scope.items[0];
        });
    </script>
</body>
</html>

  

以上是关于AngularJs练习Demo5的主要内容,如果未能解决你的问题,请参考以下文章

angularjs购物车练习

从 AngularJS url 中删除片段标识符(# 符号)

初入AngularJS基础门

AngularJS ——ngResourceRESTful APIs 使用

浅谈AngularJS中的$parse和$eval

spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段