zoukankan      html  css  js  c++  java
  • AngularJS基本指令

    <!doctype html> 
    <html  ng-app> 
    <head> 
      <meta charset="UTF-8"> 
      <title>Hello AngularJS</title> 
      <script src="e:angular.min.js"></script> 
    </head> 
    <body> 
       <div> 
    <input  type="text" ng-model="yourname"  placeholder="Enter a name here" /> 
    <h1>Hello, {{ yourname }} !</h1>  
       </div> 
    </body> 
    </html> 

    这是AngularJS的一个小例子,不过还是觉得好神奇,好高大上。算了,不扯这个没用的了,这个例子我也是遇到了点问题。最万恶的问题是路径问题。这个估计我是弄不明白了,引用路径的时候一定要用“”,而不是“/”。还有,是angular.min.js而不是angularjs.min.js。其次就是html那里忘记打ng-app,忘了指定它是angularjs了。 

    AngularJS通过ng-directives扩展了HTML,并以ng作为前缀的HTML属性。(HTML5允许以data扩展属性,所以使用data-ng-) 
    AngularJS表达式卸载双大括号内:{{expression}} 
    ng-app指令定义一个AngularJS应用程序。 
    ng-init指令初始化应用程序数据 
    ng-model指令把元素值绑定到应用中。 
    ng-bind指令把应用程序数据绑定到HTML视图。 
    ng-repeat重复一个HTML 

    <!doctype html> 
    <html  ng-app> 
    <head> 
      <meta charset="UTF-8"> 
      <title>ng-repeat  数组</title> 
      <script src="e:angular.min.js"></script> 
    </head> 
    <body> 
       <div ng-app=""  ng-init="names=[{name:'John',sex:'M'},{name:'Rose',sex:'F'},{name:'Lucy',sex:'F'}]"> 
            <p>循环对象</p> 
            <ul> 
                <li  ng-repeat="x in names" > 
                    {{x.name+", "+x.sex}} 
                </li> 
            </ul> 
       </div> 
    </body> 
    </html> 

    ng-controller指令定义了应用程序控制器 控制器是js对象,由js对象的构造函数创建。控制器的$scope是控制器所指向的应用程序/HTML元素。 

    <div ng-app="" ng-controller="personController"> 

    名: <input type="text" ng-model="person.firstName"><br> 
    姓: <input type="text" ng-model="person.lastName"><br> 
    <br> 
    姓名: {{person.fullName()}} 

    </div> 

    <script> 
    function personController($scope) { 
        $scope.person = { 
            firstName: "John", 
            lastName: "Doe", 
            fullName: function() { 
                var x; 
                x = $scope.person; 
                return x.firstName + " " + x.lastName; 
            } 
        }; 

    </script> 

    AngularJS过滤器用于转换数据。 
    currency    格式化数字为货币格式 
    filter      从数组项中选择一个子集。输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型。 
    lowercase   格式化字符串为小写 
    orderBy     根据某个表达式排列数组 
    uppercase   格式化字符串为大写 

    <div ng-app="" ng-controller="namesController"> 
    <p>输入过滤:</p> 
    <p><input type="text" ng-model="name"></p> 
    <ul> 
      <li ng-repeat="x in names | filter:name | orderBy:'country'"> 
        {{ (x.name | uppercase) + ', ' + x.country }} 
      </li> 
    </ul> 
    </div> 

    ng-disabled指令直接绑定应用程序数序到HTML的disabled属性。 
    <div ng-app=""> 
    <p> 
    <button ng-disabled="mySwitch">点我!</button> 
    </p> 
    <p> 
    <input type="checkbox" ng-model="mySwitch">按钮 
    </p> 
    </div> 

    ng-show显示或隐藏一个HTML元素。  true  false 
    ng-click指令定义了一个AngularJS单击事件 
    控制器污染了全局命名空间,因此,将所有的控制器可以放置一个模块中,保持全局命名空间的整洁。 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    {{ firstName + " " + lastName }} 
    </div> 
    <script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) { 
        $scope.firstName = "John"; 
        $scope.lastName = "Doe"; 
    }); 
    </script>

  • 相关阅读:
    关于需求转化的事情
    自由邮件的配置
    广告数据关联CS后台数据
    向新同事学习,如何配置邮件
    渠道映射等关系
    机器学习基本概念
    家政业务系统常识
    SAP APO
    SAP Web Dynpro
    SAP Web Dynpro-监视应用程序
  • 原文地址:https://www.cnblogs.com/forerver-elf/p/4724166.html
Copyright © 2011-2022 走看看