<!DOCTYPE html> <html ng-app="demoApp"> <head> <Meta charset="utf-8"> <script src="editor-app/libs/angular_1.2.13/angular.min.js"></script> <script src="editor-app/libs/angular_1.2.13/angular-animate.min.js"></script> <script src="test/demo.js"></script> </head> <!-- body #s --> <body > <!-- --> <h5>1、ng-model属性双向绑定“\{\{\}\}”</h5> <div ng-controller="helloCtrl"> <p>名字输入 : <input type="text" name="world" ng-model="world" /></p> <p>Hello后面输出： {{world}}</p> </div> <h5>2、ul-ol-li筛选、 排序示例</h5> <div ng-controller="phoneListCtrl"> <input ng-model="quer"/> <select ng-model="sortType"> <option value="name">按姓名</option> <option value="age">按年龄</option> </select> <ul> <li ng-repeat="phone in phones |filter:quer |orderBy:sortType"> <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p> </li> </ul> <ol> <li ng-repeat="phone in phones |filter:quer |orderBy:sortType"> <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p> </li> </ol> </div> <h5>3、简单金额统计</h5> <div ng-controller="multipleController"> 数量：<input type="number" min="0" max="10" required ng-model="num1"/> 单价：<input type="number" min="1" max="100" required ng-model="num2"/> <p>总计（默认美元形式）：{{num1*num2 | currency}}</p> <p>总计（指定人民币形式）：{{num1*num2 | currency:"RMB ¥"}}</p> </div> <h5>4、filter:内置过滤器；自定义过滤器</h5> <div ng-controller="filterController"> <input ng-model="lower"> <input ng-model="upper"> <p>{{ lower | lowercase }}</p> <p>{{ upper | uppercase }}</p> </div> <h5>5、指令directive示例-根据格式显示时间</h5> <div ng-controller="directiveController"> <p> 要显示的时间格式:<input ng-model="format"/></p> <p>当前时间:<span my-current-time></span></p> </div> <h5>6、</h5> <div ng-controller="showHideController"> <p><button ng-click="toggle()">显示/隐藏</button></p> <p ng-hide="myVar"> 名：<input ng-model="ming"/> 姓：<input ng-model="xing"/> ----姓名：{{xing+" "+ming}} </p> </div> <h5>7、自定义服务</h5> <div ng-controller="myController7"> <input ng-init="message='good'" ng-model="message"/> <button ng-click="callNotify(message);">notify</button> </div> <script type="text/javascript"> var app=angular.module("demoApp",[]); //demo1 app.controller("helloCtrl",function($scope){ $scope.world="angularjs text";//初始值 }); //demo2 var phoneListCtrl=['$scope','$http',function($scope,$http){ $scope.phones=[ {name:"小赵",age:"34",snippet:"行政",imsrc:"editor-app/images/bpmn-error.png"},{name:"张域",age:"19",snippet:"法务",imsrc:"editor-app/images/datadefinition.png"},{name:"刘芳",age:"25",snippet:"财务",imsrc:"editor-app/images/wrench.png"},{name:"袁华",age:"46",snippet:"运营",imsrc:"editor-app/images/delete.png"},{name:"小孙",age:"22",snippet:"技术",imsrc:"editor-app/images/bpmn-warning.png"} ]; //方式二赋值 //$http.get('test/test.json').success(function(data){ // $scope.phones=data; //}); $scope.sortType='age'; }]; //demo3 function multipleController($scope){ //初始 $scope.num1=2; $scope.num2=4; } //demo4 function filterController($scope){ //初始 $scope.lower="UPPERCASE LETTERS TO LOWERCASE"; $scope.upper="lowercase letters to uppercase"; } //demo5 function directiveController($scope){ $scope.format='yyyy-MM-dd HH:mm:ss'; } //在module模块中新建指令 app.directive('myCurrentTime',function($timeout,dateFilter){ return function(scope,element,attrs){ var format,timeoutId; function updateTime(){ element.text(dateFilter(new Date(),format)); } //$watch监听scope值的改变 scope.$watch('format',function(value){ format=value; updateTime(); }); function updateLater(){ timeoutId=$timeout(function(){ updateTime(); updateLater(); },1000); } element.bind('$destroy',function(){ $timeout.cancel(timeoutId); console.log(timeoutId); }); updateLater(); } }); //demo6 app.controller("showHideController",function($scope){ $scope.xing="雷"; $scope.ming="小风" $scope.myVar=false; $scope.toggle=function(){ $scope.myVar=!$scope.myVar; } }); //demo7--服务factory-callNotify调用自定义服务notifyService angular.module("demoApp",[]).factory('notify',['$window',function(win){ var msgs=[]; return function(msg){ msgs.push(msg); if(msgs.length==3){ win.alert(msgs.join('\n')); msgs=[]; } }; }]); function myController7(scope,notifyService){ scope.callNotify=function(msg){ notifyService(msg); }; } myController7.$inject=['$scope','notify']; </script> </body> <!-- body #e --> </html>
例子2：
<!DOCTYPE html> <html ng-app="demoApp"> <head> <Meta charset="utf-8"> <script src="editor-app/libs/angular_1.2.13/angular.min.js"></script> <script> var app=angular.module("demoApp",[]); app.controller("demoController",function($scope){ //初始化 $scope.productsList=[ {name:"苹果",category:"水果",other:"--"},{name:"香蕉",{name:"黄瓜",category:"蔬菜",{name:"豆角",{name:"西瓜",{name:"米",category:"其它",{name:"白菜",{name:"油",{name:"萝卜",other:"--"} ]; $scope.quantity=0; $scope.price=0; //点击计算按钮 $scope.countTotalFunction=function(){ if(undefined==$scope.productName||null==$scope.productName){ alert("请选择商品名称！"); }else{ alert('商品名称：'+$scope.productName.name+"，总计: "+$scope.quantity*$scope.price); } }; }); </script> </head> <body > <div style="text-align: left;margin-left: 200px;"> <h5>DEMO:购买某种商品的金额统计</h5> <div ng-controller="demoController"> <p>商品名称： <select ng-model="productName" ng-options="p.name group by p.category for p in productsList"> <option value=''>--请选择--</option> </select> </p> <p>数量：<input type="text" ng-model="quantity" required /></p> <p>单价：<input type="text" ng-model="price" required /></p> <p>自动统计金额：{{quantity*price}}</p> <button ng-click="countTotalFunction()">手动计算金额</button> </div> </div> <!-- PS: 1-$scope作用域是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,数据绑定就靠它。 $rootscope是各个controller中scope的桥梁。用$rootscope定义的值，可以在各个controller中使用。 2-AngularJS拥有许多扩展的HTML属性即指令： 如ng-app,ng-init,ng-model,ng-controller,ng-click,ng-change,ng-class,ng-show,ng-hide,ng-disabled,ng-cloak,ng-view,ng-bind,ng-include,ng-options... 3-AngularJS服务： $http $location $timeout $interval $q $routeProvider $log.... --> </body> </html>原文链接：https://www.f2er.com/angularjs/147549.html
