QQ交流群:110826636

AngularJs记录学习01

<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/Angular.js"></script>
 <script>
  //控制器注册
   var myapp=angular.module("myapp", []).controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
    });
</script>
</head>
<body >
学习地址<br/>
http://www.yiibai.com/angularjs/angularjs_environment.html<br/>
http://docs.angularjs.cn/api/ng/filter/filter <span>指令集合</span> ng-app:设定作用域<br/>
ng-model:设定模型变量<br/>
ng-controller:设置某个控制器的作用域<br/>
ng-bind:绑定模型<br/>
ng-init:该指令初始化应用程序数据。<br/>
ng-repeat:该指令将重复集合中的每个项目的HTML元素。用于迭代<br/>
<p style="color:red;">注意点:angular.module("myapp", [])这样的注册只能有一次,其他地方使用会报错</p>
ng-disabled:禁用一个给定的控制<br/>
ng-show:显示一个给定的控制<br/>
ng-hide:隐藏在给定的控制<br/>
ng-click:表示AngularJS click事件<br/>
<br/>
<span>作用域对象</span> $scope:标示控制器的作用域 <br/>
<span>模型一</span><br/> Hello {{'World'}} {{123}}! <br/>
<br/>
<span>模型二</span><br/> Your name:
<input type="text" ng-model="yourname" placeholder="World">
Hello {{yourname || 'World'}}! <br/>
<br/>
<span>模型三</span><br/>
<table>
  <tr>
    <th>row number</th>
  </tr>
  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
    <td>{{i}}</td>
  </tr>
</table>
<table>
  <tr>
    <th>row number</th>
  </tr>
  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
    <td>{{i+1}}</td>
  </tr>
</table>
<br/>
<br/>
<span>模型四</span><br/>
<div ng-controller="HelloController" >
  <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2> 
  <br/>
  <br/>
</div>
<span>模型五</span><br/>

  <p>我的名字:
    <input type="text" ng-model="name">
  </p>
  <p>Hello, <span ng-bind="name"></span>!</p>

<br/>
<br/>
<span>模型六</span><br/>
<div ng-app="myapp01" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]"> 
{{countries}} <br/>
  {{countries[0].name}} 
  </div>
<br/>
<br/>
<span>模型七</span><br/>
<script>
//自定义注册过滤器
myapp.filter('kavlezFilter',function(){
    return function(input){
        if(input){
            return '1111:\"'+input+'"';
        }
    }
});
</script>
<input type="text" ng-model="student.firstName"><br/>
大写过滤: {{student.firstName | uppercase}}<br/>
小写过滤: {{student.firstName | lowercase}}<br/>
货币过滤: {{student.firstName | currency}}<br/>
自定义过滤: {{student.firstName | kavlezFilter}}<br/>
排序过滤:<br/>
<ul ng-repeat="i in [{name:'b'}, {name:'ab'}, {name:'a'}, {name:'bs'}]|orderBy:'name'">
  <li>{{i.name}}</li>
</ul>
<br/>
<br/>
<span>模型八</span><br/>
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<input type="radio" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
<br/>
<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>
<br/>
<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>
<br/>
<div ng-controller="TestController">
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
<button ng-click="clickTest()">Click Me!</button>
</div>
<script>
myapp.controller("TestController", function($scope) {
            $scope.clickTest = function(){
                $scope.clickCounter = $scope.clickCounter + 1;
            };
    });
</script>
支持事件<br/>
ng-click<br/>
ng-dbl-click<br/>
ng-mousedown<br/>
ng-mouseup<br/>
ng-mouseenter<br/>
ng-mouseleave<br/>
ng-mousemove<br/>
ng-mouseover<br/>
ng-keydown<br/>
ng-keyup<br/>
ng-keypress<br/>
ng-change<br/>
</body>
</html>

 

posted @ 2015-07-17 17:09  FourOne  阅读(309)  评论(1编辑  收藏