angular1
发布时间：2020-12-17 08:42:56 所属栏目：安全 来源：网络整理
导读：AngularJS 数字 div ng-app = "" ng-init = "quantity=1;cost=5" p 总价： {{ quantity * cost }} / p / div div ng-app = "" ng-init = "quantity=1;cost=5" p 总价： span ng-bind = "quantity * cost" / span / p / div 字符串 div ng-app = "" ng-init =
AngularJS数字<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div> <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p> </div>
字符串<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： {{ firstName + " " + lastName }}</p> </div> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS 对象<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>
AngularJS 数组<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div> <div ng-app="" ng-init="points=[1,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>
数据绑定<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div>
循环数组<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <p>循环对象：</p> <ul> <li ng-repeat="x in names"> {{ x.name + ',' + x.country }} </li> </ul> </div>
创建自定义的指令<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script> var app = angular.module("myApp",[]); app.directive("runoobDirective",function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
</body>
ng-model 指令<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.name = "John Doe"; }); </script>
验证用户输入<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
状态<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <p>编辑邮箱地址，查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> </form>
输入 变化<style> input.ng-invalid { background-color: #ccc; } </style>
</head>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
scope<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button> </div> <script> var app = angular.module('myApp',function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; }); </script>
rootScope<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul> </div> <script> var app = angular.module('myApp',function($scope,$rootScope) { $scope.names = ["Emil","Tobias","Linus"]; $rootScope.lastname = "Refsnes"; }); </script>
控制器方法<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('myApp',[]); app.controller('personCtrl',function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
外部控制器文件<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
personController.js
angular.module('myApp',[]).controller('namesCtrl',function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}
];
});
过滤器<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> <p>姓名为 {{ lastName | lowercase }}</p> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> </div>
过滤循环<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ',' + x.country }} </li> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ',' + x.country }} </li> </ul> </div>
自定义过滤器<div ng-app="myApp" ng-controller="myCtrl"> 姓名: {{ msg | reverse }} </div> <script> var app = angular.module('myApp',function($scope) { $scope.msg = "Runoob"; }); app.filter('reverse',function() { //可以注入依赖 return function(text) { return text.split("").reverse().join(""); } }); </script>
$locationvar app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location) {
$scope.myUrl = $location.absUrl();
});
$httpvar app = angular.module('myApp',[]);
app.controller('myCtrl',$http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$http.get('/someUrl',config).then(successCallback,errorCallback);
$http.post('/someUrl',data,errorCallback);
var app = angular.module('myApp',[]);
app.controller('siteCtrl',$http) {
$http({
method: 'GET',url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
},function errorCallback(response) {
// 请求失败执行代码
});
});
$timeoutvar app = angular.module('myApp',$timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
},2000);
});
$intervalvar app = angular.module('myApp',$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},1000);
});
自定义服务app.service('hexafy',function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl',hexafy) {
$scope.hex = hexafy.myFunc(255);
});
过滤器 自定义服务app.filter('myFormat',['hexafy',function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
select<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite" ng-options="x.site for x in sites"></select> <h1>你选择的是: {{selectedSite.site}}</h1> <p>网址为: {{selectedSite.url}}</p> </div> <script> var app = angular.module('myApp',function($scope) { $scope.sites = [ {site : "Google",url : "http://www.google.com"},{site : "Runoob",url : "http://www.runoob.com"},{site : "Taobao",url : "http://www.taobao.com"} ]; }); </script>
select repeat<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select> <h1>你选择的是: {{selectedSite}}</h1> </div> <script> var app = angular.module('myApp',url : "http://www.taobao.com"} ]; }); </script>
表格<div ng-app="myApp" ng-controller="customersCtrl"> <table style="border:1px solid red"> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp',[]); app.controller('customersCtrl',$http) { $http.get("/try/angularjs/data/Customers_JSON.php") .then(function (result) { $scope.names = result.data.records; }); }); </script>
orderBy uppercase
|
| 指令 | 描述 |
|---|---|
| ng-app 定义应用程序的根元素。 | |
| ng-bind | 绑定 HTML 元素到应用程序数据 |
| ng-bind-html | 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 |
| ng-bind-template | 规定要使用模板替换的文本内容 |
| ng-blur | 规定 blur 事件的行为 |
| ng-change | 规定在内容改变时要执行的表达式 |
| ng-checked | 规定元素是否被选中 |
| ng-class | 指定 HTML 元素使用的 CSS 类 |
| ng-class-even | 类似 ng-class，但只在偶数行起作用 |
| ng-class-odd | 类似 ng-class，但只在奇数行起作用 |
| ng-click | 定义元素被点击时的行为 |
| ng-cloak | 在应用正要加载时防止其闪烁 |
| ng-controller | 定义应用的控制器对象 |
| ng-copy | 规定拷贝事件的行为 |
| ng-csp | 修改内容的安全策略 |
| ng-cut | 规定剪切事件的行为 |
| ng-dblclick | 规定双击事件的行为 |
| ng-disabled | 规定一个元素是否被禁用 |
| ng-focus | 规定聚焦事件的行为 |
| ng-form | 指定 HTML 表单继承控制器表单 |
| ng-hide | 隐藏或显示 HTML 元素 |
| ng-href | 为 the 元素指定链接 |
| ng-if | 如果条件为 false 移除 HTML 元素 |
| ng-include | 在应用中包含 HTML 文件 |
| ng-init | 定义应用的初始化值 |
| ng-jq | 定义应用必须使用到的库，如：jQuery |
| ng-keydown | 规定按下按键事件的行为 |
| ng-keypress | 规定按下按键事件的行为 |
| ng-keyup | 规定松开按键事件的行为 |
| ng-list | 将文本转换为列表 (数组) |
| ng-model | 绑定 HTML 控制器的值到应用数据 |
| ng-model-options | 规定如何更新模型 |
| ng-mousedown | 规定按下鼠标按键时的行为 |
| ng-mouseenter | 规定鼠标指针穿过元素时的行为 |
| ng-mouseleave | 规定鼠标指针离开元素时的行为 |
| ng-mousemove | 规定鼠标指针在指定的元素中移动时的行为 |
| ng-mouSEOver | 规定鼠标指针位于元素上方时的行为 |
| ng-mouseup | 规定当在元素上松开鼠标按钮时的行为 |
| ng-non-bindable | 规定元素或子元素不能绑定数据 |
| ng-open | 指定元素的 open 属性 |
| ng-options | 在 列表中指定 |
| ng-paste | 规定粘贴事件的行为 |
| ng-pluralize | 根据本地化规则显示信息 |
| ng-readonly | 指定元素的 readonly 属性 |
| ng-repeat | 定义集合中每项数据的模板 |
| ng-selected | 指定元素的 selected 属性 |
| ng-show | 显示或隐藏 HTML 元素 |
| ng-src | 指定 元素的 src 属性 |
| ng-srcset | 指定 元素的 srcset 属性 |
| ng-style | 指定元素的 style 属性 |
| ng-submit | 规定 onsubmit 事件发生时执行的表达式 |
| ng-switch | 规定显示或隐藏子元素的条件 |
| ng-transclude | 规定填充的目标位置 |
| ng-value | 规定 input 元素的值 |
AngularJS 事件
AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
AngularJS 验证属性
$error
转换
| API | 描述 |
|---|---|
| angular.lowercase() | 将字符串转换为小写 |
| angular.uppercase() | 将字符串转换为大写 |
| angular.copy() | 数组或对象深度拷贝 |
| angular.forEach() | 对象或数组的迭代函数 |
比较
| API | 描述 |
|---|---|
| angular.isArray() | 如果引用的是数组返回 true |
| angular.isDate() | 如果引用的是日期返回 true |
| angular.isDefined() | 如果引用的已定义返回 true |
| angular.isElement() | 如果引用的是 DOM 元素返回 true |
| angular.isFunction() | 如果引用的是函数返回 true |
| angular.isNumber() | 如果引用的是数字返回 true |
| angular.isObject() | 如果引用的是对象返回 true |
| angular.isString() | 如果引用的是字符串返回 true |
| angular.isUndefined() | 如果引用的未定义返回 true |
| angular.equals() | 如果两个对象相等返回 true |
JSON
| API | 描述 |
|---|---|
| angular.fromJson() | 反序列化 JSON 字符串 |
| angular.toJson() | 序列化 JSON 字符串 |
基础
| API | 描述 |
|---|---|
| angular.bootstrap() | 手动启动 AngularJS |
| angular.element() | 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。 |
| angular.module() | 创建，注册或检索 AngularJS 模块 |
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!