zoukankan      html  css  js  c++  java
  • AngularJs练习Demo6

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index6</title>
        <script type="text/javascript" src="~/Scripts/angular.js"></script>
        <script src="~/Scripts/angular-sanitize.js"></script>
    </head>
    <body>
        <div ng-app="myApp">
            <div ng-controller="firstController">
                <div ng-bind="text">ng-bind只能绑定一个</div>
                <div ng-bind-template="{{text}}{{name}}">ng-bind-template可以绑定多个</div>
                <div  ng-bind-html="h2">ng-bind-html 依赖sanitize插件依赖ngSanitize也可以通过使用$sce服务</div>
                <div ng-bind-html="detailContent()"></div>
                <div ng-repeat="innerList in list" ng-init="outerIndex=$index">
                    <div ng-repeat="value in innerList" ng-init="innerIndex=$index">
                        <span>list[{{outerIndex}}][[{{innerIndex}}]]={{value}}; </span>
    
                    </div>
                </div>
                <div>
                    <input type="text" ng-model="name" ng-model-options="{updateOn:'blur'}" />
                    {{name}}
    
                </div>
            </div> 
        </div>
        <script type="text/javascript">
            var app = angular.module("myApp", ['ngSanitize']);
            app.controller("firstController", function ($scope,$sce) {
                $scope.text = "PhoneGap中文网";
                $scope.name = "张三";
                $scope.h2 = "<h2>这是H2</h2>";
                $scope.detailContent = function () {
                    return $sce.trustAsHtml("<H1>使用ng的$sce来解析HTML</H1>");//记得写return
                };
                $scope.list = [['a','b'],['c','d']];
            });
    
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    循环链表问题
    非常有用的编程学习网站
    我的单例模式(C++)
    C# xml解析
    设计模式趣解
    简单工厂(C++)
    贝塞尔曲线 原理
    C++ 1.#QNAN0;1.#QNAN0
    [NOI2018]屠龙勇士 excrt
    [NOI.AC#30]candy 贪心
  • 原文地址:https://www.cnblogs.com/sumg/p/5605347.html
Copyright © 2011-2022 走看看