angularJs基础学习

最新推荐文章于 2019-02-17 15:39:05 发布
最新推荐文章于 2019-02-17 15:39:05 发布
阅读量93 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxchenBug/article/details/88153661
版权

angularJs基础学习

实例化一个angularJs模块

<body class="hold-transition skin-red sidebar-mini" ng-app="app" ng-controller="brandController" >
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i class="fa fa-trash-o" ></i> 删除</button>           
                                        <button type="button" class="btn btn-default" title="刷新" οnclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                      品牌名称:<input ng-model="searchEntity.name"> 品牌首字母:<input ng-model="searchEntity.firstChar">  
                                      <button  class="btn btn-default" ng-click="reloadList()">查询</button>                               
                                </div>
                            </div>
                            <!--工具栏/-->

                              <!--数据列表-->
                              <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                  <thead>
                                      <tr>
                                          <th class="" style="padding-right:0px">
                                              <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                          </th> 
                                          <th class="sorting_asc">品牌ID</th>
                                          <th class="sorting">品牌名称</th>                                          
                                          <th class="sorting">品牌首字母</th>                                                         
                                          <th class="text-center">操作</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr ng-repeat="entity in list">
                                          <td><input  type="checkbox" ng-click="updateSelection($event, entity.id)" ></td>                                          
                                          <td>{{entity.id}}</td>
                                          <td>{{entity.name}}</td>                                         
                                          <td>{{entity.firstChar}}</td>                                         
                                          <td class="text-center">                                           
                                               <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button>                                           
                                          </td>
                                      </tr>
                                      
                                  </tbody>
                              </table>
                              <!--数据列表/-->                        
                              <tm-pagination conf="paginationConf"></tm-pagination>
                            
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                        
                        
                     </div>
                    <!-- /.box-body -->
         
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">品牌编辑</h3>
        </div>
        <div class="modal-body">        
            <table class="table table-bordered table-striped"  width="800px">
                  <tr>
                      <td>品牌名称</td>
                      <td><input  class="form-control" placeholder="品牌名称" ng-model="entity.name">  </td>
                  </tr>                  
                  <tr>
                      <td>首字母</td>
                      <td><input  class="form-control" placeholder="首字母" ng-model="entity.firstChar">  </td>
                  </tr>                  
             </table>                
        </div>
        <div class="modal-footer">                        
            <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
        </div>
      </div>
    </div>
</div>
   
</body>
</html>
<script type="text/javascript">
        
        var app=angular.module('app',['pagination']);
        app.controller('brandController',function($scope,$http){
            
            //查询品牌列表
            $scope.findAll=function(){
                $http.get('../brand/findAll.do').success(
                    function(response){
                        $scope.list=response;
                    }        
                );                
            }
            
            
            //分页控件配置currentPage:当前页   totalItems :总记录数  itemsPerPage:每页记录数  perPageOptions :分页选项  onChange:当页码变更后自动触发的方法 
            $scope.paginationConf = {
                currentPage: 1,
                totalItems: 10,
                itemsPerPage: 10,
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function(){
                    $scope.reloadList();
                }
            };
            
            //刷新列表
            $scope.reloadList=function(){
                $scope.search( $scope.paginationConf.currentPage ,  $scope.paginationConf.itemsPerPage );
            }
            
            //分页 
            $scope.findPage=function(page,size){
                $http.get('../brand/findPage.do?page='+page +'&size='+size).success(
                    function(response){
                        $scope.list=response.rows;//显示当前页数据     
                        $scope.paginationConf.totalItems=response.total;//更新总记录数 
                    }        
                );                
            }
            
            //新增
            $scope.save=function(){
                var methodName='add';//方法名 
                if($scope.entity.id!=null){
                    methodName='update';
                }                
                $http.post('../brand/'+methodName +'.do',$scope.entity).success(
                    function(response){
                        if(response.success){
                            $scope.reloadList();//刷新
                        }else{
                            alert(response.message);
                        }                
                    }        
                );
            }
            
            //查询实体
            $scope.findOne=function(id){
                $http.get('../brand/findOne.do?id='+id).success(
                    function(response){
                        $scope.entity=response;
                    }        
                );                
            }
            
            $scope.selectIds=[];//用户勾选的ID集合 
            //用户勾选复选框 
            $scope.updateSelection=function($event,id){
                if($event.target.checked){
                    $scope.selectIds.push(id);//push向集合添加元素                     
                }else{
                    var index= $scope.selectIds.indexOf(id);//查找值的 位置
                    $scope.selectIds.splice(index,1);//参数1：移除的位置 参数2：移除的个数  
                }
            }
            
            //删除
            $scope.dele=function(){
                
                
                if(confirm('确定要删除吗？')){
                    $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
                            function(response){
                                if(response.success){
                                    $scope.reloadList();//刷新
                                }else{
                                    alert(response.message);
                                }                        
                            }
                    );
                }                    
                
            }
            
            $scope.searchEntity={};
            //条件查询 
            $scope.search=function(page,size){
                
                $http.post('../brand/search.do?page='+page +'&size='+size, $scope.searchEntity).success(
                    function(response){
                        $scope.list=response.rows;//显示当前页数据     
                        $scope.paginationConf.totalItems=response.total;//更新总记录数 
                    }        
                );    
                
            }
            
            
        });
        
    
    </script>

定义ng-app模块,代表相关模块由angularJs来接管,定义一个控制层,来控制相关逻辑

posted @ 2019-02-13 12:32 动手的程序员 阅读( ...) 评论( ...) 编辑 收藏
菩提树下的丁春秋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS基础学习笔记
qq_37962735的博客
12-04 277
  Angular是什么？优点？ 前端MVC框架 克服了HTML在构建应用上的诸多不足 特点 jQuery以dom为驱动(核心) angularjs以数据和逻辑作为驱动(核心) 最核心的是：模块化、双向数据绑定、语义化标签、依赖注入 MVC是一种开发模式 M--&gt;model一般...
AngularJS基础学习笔记之表达式
12-12
AngularJS表达式 　AngularJS表达式写在双大括号中：{{ 表达式语句 }}。 　AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 　AngularJS会准确地将表达式“输出”为计算的结果。 　AngularJS表达式...
没有JavaScript的基础，我可以学习Angular2吗？
weixin_30817749的博客
09-19 100
Can I learn and understand Angular2 without understanding JavaScript?没有JavaScript基础我能学习和理解Angular2吗？翻译来源：https://www.quora.com/Can-I-learn-and-understand-Angular2-without-understanding-JavaScript本文地...
【Angular4.X学习笔记一】对Angular的基础认识
午餐吃什么的博客
07-26 1846
Angular是什么？ 对于这个问题，很多回答给出的第一句话就是Angular是一个前端框架，能够帮助开发人员快速搭建出结构清晰的项目。 Angular4.X是目前最新的版本，拥有路由、管道、依赖注入、组件化、模块化等好用的特性。 按照官方中文文档中给出的参考进行学习：https://angular.cn/docs/ts/latest/ Angula
AngularJS ng-min ng-max
weixin_34391445的博客
07-25 628
/** *name:public.Echart *date:2017-5-24 */ functionisEmpty(value){ returnangular.isUndefined(value)||value===''||value===null||value!==value; } define(['publicMax'...
angularJs实现修改功能
maxchenBug的博客
02-13 406
angularJs实现修改功能 思路: 对表单中内容进行修改,首先需要获取这个内容,再进行修改,再清空弹窗中的内容 //查询实体 $scope.findOne=function(id){ 　　　　$http.get('../brand/findOne.do?id='+id).success( 　　　　function(response){ 　　　...
AngularJs 基础学习笔记
子灬丶逾
02-17 394
目录AngularJsAngularJs的模块AngularJs表达式AngularJs双向绑定AngularJs初始化指令AngularJs控制器循环数组AngularJs循环对象数组AngularJs内置对象总结 AngularJs AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式...
angularJs 基础学习
踩踩多来梦的博客
12-13 248
1、<body ng-app> {{111}} <body>2、<div ng-app=“”> <input type=“text" ng-model=“name” value=“”/> {{name}} </div>3、解决加载时间问题、有限加载表达式ng-bind=“name”4、$scope 中的 apply 方法 原始： 5
AngularJS基础学习
@_囚徒-2018_的家园
08-28 725
AngularJS允许在浏览器侧用JavaScript编写复杂前端应用。 Node.js是在服务器侧用JavaScript编写复杂后端应用。
angularJS基础学习笔记
iteye_920的博客
04-12 87
[url]http://www.runoob.com/angularjs/angularjs-services.html[/url] angularjs教程 [url]http://www.runoob.com/try/try.php?filename=try_ng_bind_strings[/url] ng-bind="a"作用={{a}}引用参数 ng-bind用在元素上如 ng-in...
AngularJS基础学习笔记之指令
10-24
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。
AngularJS基础学习笔记之简单介绍
10-24
AngularJS 不仅仅是一个类库，而是提供了一个完整的框架。它避免了您和多个类库交互，需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计，引领着下一代Web应用开发。也许我们5年或10年后不会使用...
AngularJS基础学习笔记之控制器
10-24
在AngularJS中，控制器是一个Javascript函数（类型/类），用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过<code>scope.$new俩创建一个新的子作用域对象时，有一个选项能让你将它当做参数传递给...
ASP基于BS结构的学生在线选课系统的实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
基于SSM的高校实验室预约管理系统的设计与实现源码
08-10
本系统结合当前实验室预约、使用和管理中存在的问题和现状进行分析，设计一套可以解决实验室使用冲突、预约流程简单的实验室预约管理系统，满足实验室的在线预约申请与审核的基本需求，可以方便对实验室和实验室设备进行信息化管理。本系统中的教师可以查看当前实验室以及设备的基本信息，在线进行实验室的预约。管理员可以对实验室和实验室的设备进行管理，以及实验室的预约申请进行审核。
毕业设计javajsp超市会员管理系统ssm源码含文档工具包
08-10
毕业设计javajsp超市会员管理系统ssm源码含文档工具包 后台是ssm框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 会员管理 公告育理 评论管理 前台 邮箱管理 积分管理 帮动 修改密码 退出系统 会员管理 公告管理 评论管理 工具管理 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
STM32F103C8T6 CAN通讯HAL库代码，采用中断接收，含Stm32CubeMX工程
最新发布
08-10
STM32F103C8T6 CAN通讯HAL库例程代码，采用中断接收，含Stm32CubeMX工程
c++的概要介绍与分析
08-10
C++是一种广泛使用的编程语言，它以其强大的功能和灵活性在计算机科学领域占据重要地位。以下是对C++资源的详细描述： 一、C++概述 C++是在C语言的基础上发展而来的，它保留了C语言的简洁、高效和接近硬件等特点，并增加了面向对象编程的支持。C++支持面向过程和面向对象的程序设计方法，使得开发者能够根据需要灵活选择编程范式。 二、C++特点 高效性：C++生成的代码质量高，程序执行效率高，仅比汇编语言慢10%～20%。 面向对象：支持封装、继承和多态等面向对象编程特性，便于构建复杂系统。 兼容性：与C语言高度兼容，绝大多数C语言程序可以不经修改在C++环境中运行。 可扩展性：支持泛型编程、模板等高级特性，提高了代码的可重用性和可维护性。 三、学习资源 官方文档：C++标准委员会发布的官方文档是了解C++语言特性的权威资源。 书籍：《C++ Primer》、《Effective C++》等经典书籍是学习C++的必备资料，它们详细介绍了C++的语法、特性和最佳实践。 在线课程：Coursera、网易云课堂等在线教育平台提供了丰富的C++课程，适合不同水平的学习者。 社区和论坛：Stac
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值