Some Little Knowledge in Learning

Keywords: JSON Session less AngularJS

1.splice

1. Role: Delete
 Usage: arr.splice(index,1); //delete index, the number of deletions is "1";
2. Function: Replacement
 Usage: arr.splice(index,1, p); // Replace the value of index with P

2. Page Percentage Settings

    <div style="height:10%;"></div>

3.Angularjs default time control

<input class="achieven_quinput" type="date"/>
onchange="angular.element(this).scope().judgeDate()"

4. Application of Time Function

    var startime = "";
    var endtime = "";
    var strstar = "";
    var strend = "";
    var startime_o = "";
    var endtime_o = "";
    $scope.judgeDate=function(a){
         startime = document.getElementById('startime').value;//Get the start time in the page: 2017-1-1
         endtime = document.getElementById('endtime').value;.//Get the termination time in the page: 2017-1-11
         strstar = startime.split("-");//Change time to [2017, 1, 1] and remove "-"
         strend = endtime.split("-");
         startime_o = Date.parse(strstar);//Turn time [2017, 1, 1] into a series of Number-type numbers
         endtime_o = Date.parse(strend);
        if(a==1){
            if(startime_o>endtime_o){
                //If the termination time is less than the start time, let the termination time = the start time
                document.getElementById('endtime').value=startime;
            }
        }
        if(a==2){
            if(startime_o>endtime_o){
                //If the termination time is less than the start time, let the start time = the end time
                document.getElementById('startime').value=endtime;
            }
        }

    }
    //Click Query
    var buyTime = "";
    var strbuy = "";
    var buyTime_o = "";
    $scope.guarashow1 = false;
    $scope.judgecheck=function(){
        $scope.guarantee = [
            {"id":"7","insuranceName":"Golden Sunset Elderly Accident Insurance","insuranceMark":"Fracture Loss Double Insurance","startTime":"2017-1-11 00.00","price":"44","startage":"60","endage":"80","buyTime":"2017-1-11"},
            {"id":"8","insuranceName":"Travel accident insurance","insuranceMark":"Double Payment for Traffic Accidents","startTime":"2017-1-11 00.00","price":"66","startage":"18","endage":"80","buyTime":"2017-1-1"},
            {"id":"9","insuranceName":"Children's insurance at home","insuranceMark":"Children's Lost Guarantee","startTime":"2017-1-11 00.00","price":"74","startage":"0","endage":"18","buyTime":"2017-2-11"}
        ];
        var buyTimearr=new Array();
        for(var i = 0;i<$scope.guarantee.length;i++){
            buyTime = $scope.guarantee[i].buyTime;
            strbuy = buyTime.split("-");
            buyTime_o = Date.parse(strbuy);
            if(buyTime_o>=startime_o && buyTime_o<=endtime_o){
                //$scope.guarashow1= true;
                buyTimearr.push($scope.guarantee[i]);//Put a timed array into a new array
            }
        }
        if(buyTimearr.length!=0){
           $scope.guarantee=buyTimearr;//Re-ng-repeat the new array
        $scope.guarashow1= true;//Show a new array ng-show
        }else{
            $scope.alertModal("No information was queried");
        }
    }

Be careful:

  1. The return value of the Date.parse() function is Number type, returning the milliseconds between the date represented by the string and midnight on January 1, 1970.
  2. For loops are prone to errors: only the last result of the loop is displayed. The method is to store the desired result and process it outside the for loop.
  3. The split() method is used to split a string into an array of strings. For example, 1:"2:3:4:5". split(":")// will return ["2", "3", "4", "5"]; for example, 2:"| a|b|c". split("|")// will return [","a","b","c"]

5. Filter: filter

1. Use filter in templates
  1. We can use a filter directly in {} followed by an expression with | splitting. The grammar is as follows: {expression | filter}

  2. Multiple filters can also be used together. The output of the previous filter will be used as the input of the next filter. (No wonder the shipper is the same as the pipe.) {expression | filter1 | filter2 | P

  3. The filter can receive parameters, which are divided by {expression | filter:argument1:argument2:... P

In addition to formatting the data in {}}, we can also use filters in instructions, such as filtering array s, and then cycling the output:

2. Use filter in controller and service

We can also use filters in our js code in the way that we are familiar with dependency injection. For example, I want to make the current filter in the controller, just inject it into the controller. The code is as follows:

 app.controller('testC',function($scope,currencyFilter){  
      $scope.num = currencyFilter(123534);  
   }

Using {{num}} in the template, you can directly output $123,534.00! The same is true of using filter s in services.

To use multiple filters in the controller, just inject a $filter, as follows:

 app.controller('testC',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
    $scope.date = $filter('date')(new Date());  
 }

The same effect can be achieved. The advantage is that you can easily use different filter s.

case

 stay HTML On the page:
 <input id="search_inp" type="text" placeholder="Query content" value="" ng-model="search" ng-change="achsearch()">
 <table class="table" style="position: relative;top: 5px;left: 10px" ng-show="productsname">
       <tbody>
           <tr style="height: 25px;line-height: 25px;position: relative;left: 10px" ng-repeat="product in products | filter:search">
               <td style="padding-bottom: 10px">
                   {{product.shopName}}
               </td>
           </tr>
       </tbody>
 </table>
 //In the js page
 $scope.productsname=false;
 $scope.achsearch=function(){
        $scope.search_inp=document.getElementById("search_inp");
        if($scope.search_inp.value==""){
            $scope.productsname=false;
        }
        else{
            $scope.productsname=true;
        }
    }

Be careful:
ng-model= "search" is essential!

6.js Storage Data

Local Storage - No time limit for data storage. After the next day, the second week or the next year, the data is still available.

The session Storage method stores data for a session. When the user closes the browser window, the data is deleted.

Methods: Window.prototype.sessionStorage = 0;Window.prototype.localStorage = 0;

   Session Storage. getItem (key) ---------- Gets the local storage value of the specified key
   Session Storage. setItem (key) -------------------- Stores value in key field
   Session Storage. removeItem (key) - - Deletes the locally stored value of the specified key
Tool class: UtilsBonc   
//Function description: Call mode UtilsBonc.StorageGetter(key)                         
                UtilsBonc.StorageSetter(key,val)

     var UtilsBonc = (function () {
       var StorageGetter = function (key) {
          return localStorage.getItem(key);
         }
        var StorageSetter = function (key, val) {
          return localStorage.setItem(key, val);
         }
        return {
          StorageGetter:StorageGetter,
          StorageSetter:StorageSetter
         }
     })();  

  //Call UtilsBonc.StorageSetter to store the value set of the variable
       var setParam={
            operatorCode: $scope.operatorCode,
            proposalNo: $scope.proposalNo,
            relationFlag: $scope.relationFlag,
            relationNo: $scope.relationNo,
            signModul:$scope.signModul,
        };
        UtilsBonc.StorageSetter("modulPames", JSON.stringify(setParam));

//Call get method to get the stored value according to the key value and assign it to the variable
      var value1 = UtilsBonc.StorageGetter("modulPames"); 
      var request_pams = JSON.parse(value1);// JSON.parse parses JSON objects from a string
      if (value1 != null && value1 != "") {
            $scope.role = request_pams.role;
            $scope.operatorCode = request_pams.operatorCode;
            $scope.proposalNo = request_pams.proposalNo;
            $scope.relationFlag = request_pams.relationFlag;
            $scope.relationNo = request_pams.relationNo;
            $scope.signModul = request_pams.signModul;
        }

7.json.parse() and json.stringify()

The json.parse() method is used to parse JSON objects from a string.
eg:   var str='{"name":"huahua","age":"32"}'
      JSON.parse(str)
 Result: age:"32"
       name:"huahua"

Note: Single quotation marks are written outside {}, and each attribute name must be double quotation marks, otherwise an exception will be thrown.

json.stringify() is used to parse strings from an object;
eg:   var a = {a:1,b:2}
      JSON.stringify(a)
 Result: "{a":1","b":2}"

Posted by warydig on Thu, 20 Jun 2019 16:34:20 -0700