AngularJS基本指令

时间:2022-05-13 21:51:32

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