+ angular codes referred day03

A, AngularJs

AngularJS is a JavaScript framework . By instruction extended HTML, and by expression binding data to HTML.

1. Characteristics of the four

MVC pattern, modular, automated two-way data binding, dependency injection

2. Use

　　1) First introduced in core packages page

　　2) must be written ng-app on the body tag

　　3) {} {} variable expression or impression data

　　4) ng-model: name corresponding to transmission values, the distal end may be acquired in accordance with the value stored in the ng-model $ scope of

　　5) $ scope: AngularJs is built-in objects, there is also a corresponding data request data

　　6) $ ng-init: the implementation of a long page, will first perform an operation in the ng-init

　　7) var app = angular.module ( 'app', []) == "defines a module called the app, must be defined later declaration module names used in the body tag,

　　　Where [] it is hard to put plug-ah

　　8) ng-click: mouse click event == "onclick

　　9) ng-repeat = "x in list": corresponding to a traverse of each list of x

　　10) $ http: AngularJs built-in objects, the main role of sending an http request, and sends ajax

　　　　$http.get $http.post

　　11) $ event: What event can obtain the current operation is commonly used in the box == "check box is checked which

Two, demo

1. Small problem

1) After you finish adding, after the increase in the value of increased success will leave the window, when the next new default is the last increase in value,

Obviously, we do not need this data when the new echo, it should be declared in the new ng-click = "entity = {}"

如：<button type="button" class="btn btn-default" title="新建" ng-click="entity={}" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>

2) Click the button invalid

ng-click = "dele ()" Do not forget ()

2. All queries js

var app = angular.module ( 'brandApp', [ 'pagination']) // [] as widget
app.controller('brandController',function($scope,$http){//$http  发送ajax
	$scope.findAll=function(){
	     $http.get('../brand/findAll.do').success(function(response){
		 $scope.list=response;
	    })
	}
});

3. paging query js code

<! - paging component Start ->
<Script the src = "../ plugins / AngularJS / pagination.js" type = "text / JavaScript"> </ Script>
<Link the rel = "this stylesheet" the href = ".. /plugins/angularjs/pagination.css ">
<-! paging component end ->


// reload the list data
            $scope.reloadList=function(){
                // switch Page
                $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }
			// paging controls configuration
            $scope.paginationConf = {
                // current page
                currentPage: 1,
                // the default number of page
                totalItems: 10,
                // how many pieces of data per page show
                itemsPerPage: 10,
                // page drop-down box to show how many data can be manually adjusted
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function(){
                    $ Scope.reloadList (); // reload
                }
            };


			// The first parameter is the current tab page the second argument: the number of data per page show
            $scope.findPage=function(page,rows){
                $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
                    function(response){
                        // returns the data set list <Brand>
                        $scope.list=response.rows;
                        The total number of records // query
                        $ Scope.paginationConf.totalItems = response.total; // update the total number of records
                    }
                );
            }

4. Add and modify save js

By querying id exists judge is new or modified

         　 $scope.save=function(){
                var methodName='add';
		if ($ scope.entity.id! = null) {// id is not null it represents already exist, should be modified brand
		　　methodName='update';
		}

                $http.post('../brand/'+methodName+'.do',$scope.entity ).success(
                    function(response){
                        if(response.success){
                            //look up again
			　　 alert(response.message);
                            $ Scope.reloadList (); // reload
                        }else{
                            alert(response.message);
                        }
                    }
                );
            }

　　　　　　// query modification entities
　　　　　　　　$ scope.findOne = function (the above mentioned id) {
　　　　　　　　　　$ http.get ( '../ Brand / findOne.do? The above mentioned id =' + the above mentioned id) a .success (
　　　　　　　　　　　　　function (the Response) {
　　　　　　　　　　　　　　　　$ scope.entity = Response;
　　　　　　　　　　　　　}
　　　　　　　　　　);
　　　　　　　　}

5. Batch delete

　　　　　　　$ Scope.selectIds = []; // set the selected ID

	　　// update check
            What $ scope.updateSelection = function ($ event, id) {// $ event can obtain the current operation of the event is
                if ($ event.target.checked) {// If it is selected, the increased array
                    $scope.selectIds.push(id);
                }else{
                    var idx = $scope.selectIds.indexOf(id);
                    $ Scope.selectIds.splice (idx, 1); // delete
                }
            }

	　　//batch deletion
            $scope.dele=function(){
                // Get checked boxes
                $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
                    function(response){
                        if(response.success){
                            alert(response.message);
                            $ Scope.reloadList (); // refresh the list
                        }else{
                            alert(response.message);
		　　　　　}
                    }
                );
            }