{"id":1590,"date":"2016-04-22T13:03:41","date_gmt":"2016-04-22T05:03:41","guid":{"rendered":"http:\/\/www.daliane.com\/?p=1590"},"modified":"2016-04-22T13:03:41","modified_gmt":"2016-04-22T05:03:41","slug":"angularjs_kuai_su_ru_men_can_kao_dai_ma","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/angularjs_kuai_su_ru_men_can_kao_dai_ma\/","title":{"rendered":"AngularJs \u5feb\u901f\u5165\u95e8\u53c2\u8003\u4ee3\u7801"},"content":{"rendered":"

<!DOCTYPE html>
\n<html>
\n<head>
\n<meta charset=”utf-8″>
\n<script src=”http:\/\/apps.bdimg.com\/libs\/angular.js\/1.4.6\/angular.min.js”><\/script>
\n<style>
\ntable, th , td {
\nborder: 1px solid grey;
\nborder-collapse: collapse;
\npadding: 5px;
\n}
\ntable tr:nth-child(odd) {
\nbackground-color: #f1f1f1;
\n}
\ntable tr:nth-child(even) {
\nbackground-color: #ffffff;
\n}
\n<\/style>
\n<\/head>
\n<body><\/p>\n

1.\u4f7f\u7528ng-model\u4f20\u503c
\n<div >
\n<p>\u8f93\u5165name : <input type=”text” ng-model=”name1″><\/p>
\n<h1>Hello {{name1}}<\/h1>
\n<\/div>
\n2.ng-init\u521d\u59cb\u5316 \u5f88\u5c11\u7528 \u4e00\u822c\u7528 controller
\n<div ng-init=”name2=’John'”>
\n<p>\u521d\u59cb\u5316\u540d\u5b57 <span ng-bind=”name2″><\/span><\/p>
\n<\/div>
\n3.\u8868\u8fbe\u5f0f\u7684\u4f7f\u7528
\n<div >
\n<p>\u6211\u7684\u7b2c\u4e00\u4e2a\u8868\u8fbe\u5f0f\uff1a {{ name1 + name2 }}<\/p>
\n<\/div><\/p>\n

<h1>AngularJS \u5b9e\u4f8b<\/h1>
\n4.ng-init\u521d\u59cb\u5316\u4e00\u4e2a\u5bf9\u8c61 \u7c7b\u4f3c\u4e8ejason\u683c\u5f0f
\n<div ng-init=”person={firstName:’John’,lastName:’Doe’}”><\/p>\n

<p>\u59d3\u4e3a {{ person.lastName }}<\/p><\/p>\n

<\/div>
\n5.ng-init\u521d\u59cb\u5316\u4e00\u4e2a\u6570\u7ec4 ng-repeat\u8fdb\u884c\u6570\u636e\u7684\u904d\u5386
\n<div ng-init=”names=[‘A’,’B’,’C’]”>
\n<ul><li ng-repeat=”x in names”>{{x}}<\/li><\/ul>
\n<\/div>
\n6.\u5b9a\u4e49\u4e00\u4e2a\u63a7\u5236\u5668 js\u4ee3\u7801\u53ef\u5916\u7f6e
\n<div ng-app=”myApp” ng-controller=”myCtrl”><\/p>\n

<h1>{{carname}}<\/h1><\/p>\n

<\/div><\/p>\n

<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope) {
\n$scope.carname = “Volvo”;
\n});
\n<\/script><\/p>\n

7.controller\u53d7 ng-model\u5f71\u54cd
\n<div ng-app=”myApp” ng-controller=”myCtrl”>
\n<input ng-model=”name”\/>
\n<h1>{{name}}<\/h1>
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’,[]);
\napp.controller(‘myCtrl’,function($scope){
\n$scope.name=”testname”;
\n});
\n<\/script><\/p>\n

8.$rootScope \u7c7b\u4f3c\u4e8e\u5168\u5c40\u53d8\u91cf
\n<div ng-app=”myApp” ng-controller=”myCtrl”>
\n<ul><li ng-repeat=”x in names”>{{x}}{{h}}<\/li><\/ul>
\n<\/div>
\n<script>
\nvar a=’hehe’;\/\/\u7ed9 ajax \u4f20\u503c \u63d0\u4f9b\u4e86\u53ef\u80fd
\nvar app = angular.module(‘myApp’,[]);
\napp.controller(‘myCtrl’,function($scope){
\n$scope.names=[‘A’,’B’,’C’];
\n$scope.h=a;
\n});
\n<\/script><\/p>\n

9.controller \u63a7\u5236\u5668\u65b9\u6cd5
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n<h1>{{fullname()}}<\/h1>
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’,[]);
\napp.controller(‘myCtrl’,function($scope){
\n$scope.aname=’A’;
\n$scope.bname=’B’;
\n$scope.fullname=function(){
\nreturn $scope.aname+’ ‘+$scope.bname;
\n}
\n});
\n<\/script><\/p>\n

10.controller\u5347\u7ea7\u7248
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n<ul><li ng-repeat=’x in names’>{{x}}<\/li><\/ul>
\n<\/div>
\n<script>
\nangular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope){
\n$scope.names=[‘A’,’B’,’C’];
\n});
\n<\/script><\/p>\n

11.\u8fc7\u6ee4\u5668uppercase\u5927\u5199 lowercase \u683c\u5f0f\u5316\u5b57\u7b26\u4e32\u4e3a\u5c0f\u5199
\n<div ng-app=’myApp’ ng-init=’name=”aaa”‘>
\n{{name | currency}}
\n<\/div>
\n<script>
\nangular.module(‘myApp’,[]);
\n<\/script><\/p>\n

12. currency \u683c\u5f0f\u5316\u6570\u5b57\u4e3a\u8d27\u5e01\u683c\u5f0f
\n<div ng-app=’myApp’ ng-init=’name=”aaa”‘>
\n\u6570\u91cf\uff1a<input type=’number’ ng-model=’quantity’>
\n\u5355\u4ef7\uff1a<input type=’number’ ng-model=’price’>
\n<p>\u603b\u4ef7\uff1a{{quantity*price | currency}}<\/p>
\n<\/div>
\n<script>
\nangular.module(‘myApp’,[]);
\n<\/script><\/p>\n

13.orderBy \u8fc7\u6ee4\u5668\u6839\u636e\u8868\u8fbe\u5f0f\u6392\u5217\u6570\u7ec4
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n<ul><li ng-repeat=’x in names | orderBy : “num”‘>{{x.num}} {{x.name}}<\/li><\/ul>
\n<\/div>
\n<script>
\nangular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope){
\n$scope.names=[{num:2,name:’B’},{num:3,name:’C’},{num:1,name:’A’}];
\n});
\n<\/script><\/p>\n

14.\u670d\u52a1 $location.absUrl() \u8fd4\u56de\u5f53\u524d\u9875\u9762\u7684 URL \u5730\u5740
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n{{url}}
\n<\/div>
\n<script>
\nangular.module(‘myApp’,[]).controller(‘myCtrl’,function($scope,$location){
\n$scope.url=$location.absUrl();
\n});
\n<\/script><\/p>\n

15.$http \u670d\u52a1
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n{{mydata}}
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope, $http) {
\n$http.get(“syscfg\/workermsg.action?fn=angular”).then(function (response) {
\n$scope.mydata = response.data;
\n});
\n});<\/p>\n

<\/script><\/p>\n

16.$timeout \u670d\u52a1 \u5b9a\u65f6\u5668
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n{{myHeader}}
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope, $timeout) {
\n$scope.myHeader = “Hello World!”;
\n$timeout(function () {
\n$scope.myHeader = “How are you today?”;
\n}, 2000);
\n});<\/p>\n

<\/script><\/p>\n

17.$interval \u670d\u52a1 \u95f4\u9694\u91cd\u590d\u6267\u884c \u5fc3\u8df3\u5668
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n{{theTime}}
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope, $interval) {
\n$scope.theTime = new Date().toLocaleTimeString();
\n$interval(function () {
\n$scope.theTime = new Date().toLocaleTimeString();
\n}, 1000);
\n});<\/p>\n

<\/script><\/p>\n

18.\u521b\u5efa\u81ea\u5b9a\u4e49\u670d\u52a1
\n<div ng-app=’myApp’ ng-controller=’myCtrl’>
\n{{hex}}
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.service(‘hexafy’, function() {
\nthis.myFunc = function (x) {
\nreturn x.toString(16);
\n}
\n});
\napp.controller(‘myCtrl’, function($scope, hexafy) {
\n$scope.hex = hexafy.myFunc(255);
\n});<\/p>\n

<\/script><\/p>\n

19.\u8fc7\u6ee4\u5668\u4e2d\uff0c\u4f7f\u7528\u81ea\u5b9a\u4e49\u670d\u52a1
\n<div ng-app=”myApp”>
\n<input type=’number’ng-init=’num=0′ ng-model=’num’\/>
\n<h1>{{num | myFormat}}<\/h1>
\n<\/div>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.service(‘hexafy’, function() {
\nthis.myFunc = function (x) {
\nreturn x.toString(16);
\n}
\n});
\napp.filter(‘myFormat’,[‘hexafy’, function(hexafy) {
\nreturn function(x) {
\nreturn hexafy.myFunc(x);
\n};
\n}]);<\/p>\n

<\/script><\/p>\n

20.AngularJS $http \u5b58\u5728\u8de8\u57df\u95ee\u9898\u65e0\u6cd5\u8bf7\u6c42 \u9700\u653e\u7f6e\u672c\u5730\u6587\u4ef6
\n<div ng-app=’app’ ng-controller=’ctrl’>
\n<ul><li ng-repeat=’x in names’>{{x.Name+’,’+x.Country+’,’+x.City}}<\/li><\/ul>
\n<\/div>
\n<script>
\nangular.module(‘app’,[]).controller(‘ctrl’,function($scope,$http){
\n$http.get(“http:\/\/www.runoob.com\/try\/angularjs\/data\/Customers_JSON.php”)
\n.success(function(response){$scope.names = response.records;});
\n});
\n<\/script><\/p>\n

21.\u4e0b\u62c9\u6846select
\n<div ng-app=”myApp” ng-controller=”myCtrl”>
\n<select ng-model=”selectedSite” ng-options=”x.site for x in sites”>
\n<\/select>
\n<p><a href=”{{selectedSite.url}}”>{{selectedSite.site}}<\/a><\/p><\/p>\n

<\/div><\/p>\n

<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope) {
\n$scope.sites = [
\n{site : “Google”, url : “http:\/\/www.google.com”},
\n{site : “Runoob”, url : “http:\/\/www.runoob.com”},
\n{site : “Taobao”, url : “http:\/\/www.taobao.com”}
\n];
\n});
\n<\/script><\/p>\n

22.\u8868\u683c css \u53c2\u8003\u5728\u5934\u90e8 \u5229\u7528oderBy\u6392\u5e8f $index+1\u663e\u793a\u6392\u5e8f
\n<div ng-app=”myApp” ng-controller=”myCtrl” >
\n<table >
\n<tr ng-repeat=’x in sites | orderBy : “num”‘>
\n<td>{{$index+1}}<\/td>
\n<td>{{x.site}}<\/td>
\n<td>{{x.url}}<\/td>
\n<\/tr>
\n<\/table><\/p>\n

<\/div><\/p>\n

<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘myCtrl’, function($scope) {
\n$scope.sites = [
\n{num:3,site : “Google”, url : “http:\/\/www.google.com”},
\n{num:1,site : “Runoob”, url : “http:\/\/www.runoob.com”},
\n{num:2,site : “Taobao”, url : “http:\/\/www.taobao.com”}
\n];
\n});
\n<\/script>
\n<\/body><\/p>\n

<\/html>\"u=3089529664,1359141157&fm=21&gp=0\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

<!DOCTYPE html> <html> <head> <met…<\/p>\n","protected":false},"author":2,"featured_media":1591,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38],"tags":[64],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1590"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=1590"}],"version-history":[{"count":1,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1590\/revisions"}],"predecessor-version":[{"id":1592,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/1590\/revisions\/1592"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/1591"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=1590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=1590"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=1590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}