angularJS基础使用(一)
发布时间：2020-12-17 06:48:18 所属栏目：安全 来源：网络整理
导读：低烧还有想感冒的难受,就不多说什么了,甚是烦躁 没有建mvc结构js文件(主要是为了方便,不用切换文件),不过在script中已经分层编写js了,只需要将相应的base,controller,service保存到相应建立的js文件,然后在html中引入即可()先引入父级js,再引入子级js,先引入
|
低烧还有想感冒的难受,就不多说什么了,甚是烦躁 没有建mvc结构js文件(主要是为了方便,不用切换文件),不过在script中已经分层编写js了,只需要将相应的base,controller,service保存到相应建立的js文件,然后在html中引入即可()先引入父级js,再引入子级js,先引入service.js,再引入controllerjs) 如果不习惯看三元,都有相应的一般逻辑判断代码/方法 $location没有写demo,按照代码那样从url是可以获取到想要的数据的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <!--响应式页面的分页样式--> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"><!--为:<div class="pagination">提供样式--> <!--angular.js--> <script type="text/javascript" src="../js/angularjs/angular.min.js"></script> <!--分页--> <link rel="stylesheet" href="../js/angularjs/pagination.css"> <script type="text/javascript" src="../js/angularjs/pagination.js"></script> <!--自定义js:base/Controller/service--> <script type="text/javascript"> // base.js // var app = angular.module(‘myApp‘,[]); // base_pagination.js // 分页(pagination是angular已经封装好的组件) var app = angular.module(‘myApp‘,[‘pagination‘]); // customService.js app.service(‘myService‘,function($http) { this.findOne = function() { return $http.get("../user/add.do"); } // 分页查询 this.findPage = function(page,rows,searchEntity) { return $http.post(‘../user/findPage.do‘,searchEntity); } }); // baseController.js app.controller(‘baseController‘,function($scope) { $scope.searchEntity = {}; // 初始化分页参数集合 $scope.paginationConf = { currentPage: 1,// 当前页码 totalItems: 10,// 总记录数 itemsPerPage: 10,// 每页显示数据条数 prePageOptions: [10,20,30,40,50],// 选择每页显示数据条数 // 更改页码时,自动触发事件 onChange: function() { $scope.reloadList($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage); } } }); // angular过滤器(信任html代码)与ng-bind-html结合使用 app.filter(‘trustHtml‘,[‘$sce‘,function($sce) { return function(data) { return $sce.trustAsHtml(data); } }]); // 页面添加分页组件 // <tm-pagination conf="paginationConf"></tm-pagination> // customController.js app.controller(‘myController‘,function(myService,$scope,$controller,$location) { // alert(1); $scope.list = [{id : 1,hobby : ‘篮球‘},{id : 2,hobby : ‘游泳‘},{id : 3,hobby : ‘跑步‘}]; // 加载页面/分页查询 $scope.reloadList = function(page,rows){ // page:当前页码,rows:本次查询数据条数,searchEntity:用来封装查询条件 myService.findPage(page,$scope.searchEntity).success(function(response) { $scope.pages = response.pages; $scope.paginationConf.totalItems = response.total; }); } // 事件(event) $scope.checkedIsSelect = function($event) { // alert($event.target.checked); $scope.checkedIds = []; $event.target.checked ? ($scope.selectAll=true,addIdsAll($scope.checkedIds,$scope.list)): $scope.selectAll=false;// 三元简化代码 /*if($event.target.checked) { $scope.selectAll=true; $scope.checkedIds.push(1); $scope.checkedIds.push(2); } else { $scope.selectAll=false; }*/ } addIdsAll = function(ids,list) { for (var i = 0; i < list.length; i++) { ids.push(list[i].id); } } $scope.checkedIds = []; $scope.checkSelect = function($event,id) { operateIds($event,$scope.checkedIds,id,$scope.list); // $event.target.checked ? addId($scope.checkedIds,): delId($scope.checkedIds,);// 三元简化代码 /*if ($event.target.checked){ addId($scope.checkedIds,id); } else{ delId($scope.checkedIds,id); }*/ } operateIds = function($event,ids,list) { $event.target.checked ? (ids.push(id),ids.length == list.length ? $scope.selectAll=true: $scope.selectAll=false): (ids.splice(ids.indexOf(id),1),$scope.selectAll=false); } // 不使用$scope,则方法只能在js中使用,不能在页面中调用 addId = function(ids,id) { ids.push(id); if(ids.length == 2) $scope.selectAll=true; } delId = function(ids,id){ var idx = ids.indexOf(id); ids.splice(idx,1); $scope.selectAll=false; } $scope.isSelect = function(ids,id) { return ids.indexOf(id) > -1 ? true: false;// 三元简化代码 /*if(idx > -1){ return true; } else { return false; }*/ } // 过滤 $scope.html = "<font color=‘red‘><b>你好</b></font>"; $scope.hello = "你好"; // 继承 $controller(‘baseController‘,{$scope:$scope}); // 获取url上的属性值 $scope.id = $location.search()[‘id‘]; // 监听属性变化 $scope.$watch(‘name‘,function(newVal,oldVal) { // alert(newVal); }); $scope.findOne = function() { myService.findOne().success(function (response) { // alert(‘success‘); }).error(function (response) { // alert(‘error‘); }); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findOne()"> <div class="pagination" style="margin-left: 50px"><!--使用bootstrap的样式--> <sapn>angular $watch demo</sapn> <div ng-bind="name"></div> <input ng-model="name" ng-init="name=‘旺财‘"><br><hr> <span>解决插值加载时显示angular插值表达式</span><br> <span ng-bind="hello"></span><br><hr> <span>解决信任html代码,即以html代码识别,而不是以文本原样输出</span><br> <span ng-bind-html="html|trustHtml"></span><br><hr> <span>checkbox复选框的全选与反选</span> 已选择的爱好id:<span>{{checkedIds}}</span> <div> <span>请选择您的兴趣爱好</span> <!--复选框全选与反选--> <table> <tr> <td> <input type="checkbox" ng-checked="selectAll" ng-click="checkedIsSelect($event)"> </td> <td>全选</td> </tr> <!--angular遍历list集合--> <tr ng-repeat="item in list"> <td> <input type="checkbox" ng-checked="isSelect(checkedIds,item.id)" ng-click="checkSelect($event,item.id)"> </td> <td ng-bind="item.hobby"></td> </tr> </table> </div> <hr> <span>angular分页条</span> <!--angular分页插件--> <tm-pagination conf="paginationConf"></tm-pagination> </div> </body> </html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |