2. 程式人生 > >angular利用$location實現搜尋功能。

angular利用$location實現搜尋功能。

阿新 • • 發佈：2019-01-05

angular $location服務的主要作用是用於獲取當前url以及改變當前的url,也就是做搜尋功能。具體看你們後端給你們的api,拼成適合的字串

一. 獲取url的相關方法:

以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash’ 這個路徑為例:

1. 獲取當前完整的url路徑:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

*2. 獲取當前url路徑(當前url#後面的內容,包括引數和雜湊值):

$location.url();
// /foo?name=bunny#myhash

*3. 獲取當前url的子路徑(也就是當前url#後面的內容,不包括引數):

$location.path()
// /foo

4. 獲取當前url的協議(比如http,https)

$location.protocol()
// http

5. 獲取當前url的主機名

$location.host()
// localhost

6. 獲取當前url的埠

$location.port()
// 80 (這裡就是wamp的預設埠號)

*7. 獲取當前url的雜湊值

$location.hash()
// myhash

*

8. 獲取當前url的引數的序列化json物件

$location.search()
// {"name":"bunny"}

二. 修改url的相關方法:

在上面講到的所有獲取url的8個方法,其中*開頭的四個方法,可以傳入引數進行修改url,在這種情況下,函式的返回值都是$location本身:

1. 修改url的子路徑(也就是當前url#後面的內容,不包括引數):

引數格式:字串

$location.url('/foo2?name=bunny2&age=12#myhash2');
// http://localhost/$location/21.1%20$location.html#/foo2?name=bunny2&age=12#myhash2

2. 修改url的子路徑部分(也就是當前url#後面的內容,不包括引數):

引數格式:字串

$location.path('/foo2/foo3');
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=bunny2&age=12#myhash2

3. 修改url的雜湊值部分

引數格式:字串

$location.hash('myhash3');
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=bunny2&age=12#myhash3

4. 修改url的引數部分

(1).傳入兩個引數,第一個引數的格式為字串:

①第二個引數的格式也是字串

第一個引數表示url引數的屬性名,第二個引數是該屬性名的屬性值,如果是已有屬性名,則修改,如果不是已有屬性,則新增

$location.search('name','code_bunny')
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2&age=12#myhash3

②第二個引數的格式為陣列,陣列中的各個值也是字串或者布林值

第一個引數表示url引數的屬性名,第二個引數是該屬性名的值,有多少個值,url中就會依次重複出現多少個.如下:

$location.search('love',['zxg','mitu'])
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2&age=12&love=zxg&love=mitu#myhash3

(2).傳入兩個引數,第一個引數為字串,第二個引數為null:

第一個值表示url引數的屬性名,如果是已有屬性名,則刪除該屬性,如果不是已有屬性,那就等於沒改過

$location.search('age',null)
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2#myhash3

(3).傳入一個引數,格式為json物件:

直接用這個json物件裡的鍵值對替換整個url的引數部分

①普通的鍵值對:

$location.search({name:'papamibunny',age:16,love:'zxg'})
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=papamibunny&age=16&love=zxg#myhash3

②屬性值為一個數組:(和(1)②一樣,重複這個屬性)

$location.search({name:['code_bunny','white_bunny','hua_bunny'],age:16,love:'zxg'})
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?name=code_bunny&name=white_bunny&name=hua_bunny&age=16&love=zxg#myhash3

(4).傳入一個引數,格式為字串:

直接用這個字串替換整個url的引數部分(沒有鍵值對,引數部分就是一個屬性名,但轉換成json物件的話,這個屬性的值就是true,但是在url裡沒有體現)

$location.search('bunnybaobao')
// http://localhost/$location/21.1%20$location.html#/foo2/foo3/?bunnybaobao#myhash3
// {"bunnybaobao":true}

三. 不存入歷史記錄:

在使用 ‘二’ 裡面的所有修改url的方法的時候,每修改一次,url都會被存入歷史記錄,可以使用後退按鈕回到修改前的url,如果不想要這種效果,而僅僅是替換當前的記錄,可以使用:

$location.replace()

舉個栗子:

// 原url:
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash
$location.url('/foo2?name=bunny2&age=12#myhash2');
// 修改一次後:
// http://localhost/$location/21.1%20$location.html#/foo2?name=bunny2&age=12#myhash2
// 按下後退回到原url:
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash
// 再按下前進回到修改後url:
// http://localhost/$location/21.1%20$location.html#/foo2?name=bunny2&age=12#myhash2
$location.path('/foo2/foo3').replace();
// 修改第二次後呼叫replace():
// http://localhost/$location/21.1%20$location.html#/foo2/foo3?name=bunny2&age=12#myhash2
// 按下後退,不會回到第二次修改前的url,而是回到第一次修改前的url:
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

四.$locationChangeStart和$locationChangeStart事件

這兩個事件分別發生在當url開始發生改變,以及url改變完成.他們都被繫結在$rootScope裡面:

    $rootScope.$on('$locationChangeStart',function(){
        console.log('開始改變$location')
    });
    $rootScope.$on('$locationChangeSuccess',function(){
        console.log('結束改變$location')
    });

這個和$route裡的$routeChangeStart和$routeChangeSuccess很類似,但是要注意的是,雖然都是改變url發生的事件,但要觸發$locationChangeStart和$locationChangeSuccess事件,就必須是$location服務導致的url變化,通過$route定義導致的url變化,不會觸發$locationChangeStart和$locationChangeSuccess事件,同樣,這裡是通過$location服務導致的url變化,所以即使定義了$routeChangeStart和$routeChangeSuccess事件,它也是不會被觸發的.

把上面講到的這些一起舉個栗子:

把 ‘一’ 裡面的8個可以取到的url部分都賦值給$scope裡的值,同時,把對應的修改方法繫結在對應的按鈕上,以便在檢視上檢視變化過程.

需要注意的是,這裡有個$scope.refresh方法,因為這裡$scope下的這些值是不會實時更新的.舉慄,$location.url()是個方法,獲取當前的url,而不是一個值,所以,當url發生改變以後,不再次呼叫$location.url(),url值是不可能被實時更新的.所以refresh方法就是在每次url改變完成後,重新獲取url對應的部分並更新檢視.

html:

<!DOCTYPE html>
<html ng-app="locationApp">
<head>
  <title>21.1 $location</title>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="locationCtrl">
  <p>完整url路徑: <span>{{absurl}}</span></p>

  <p>url路徑(當前url#後面的內容,包括引數和雜湊值): <span>{{url}}</span>
    <button ng-click="changeUrl()">改變</button>
  </p>

  <p>相對路徑(也就是當前url#後面的內容,不包括引數): <span>{{path}}</span>
    <button ng-click="changePath()">改變</button>
  </p>

  <p>協議(比如http,https): <span>{{protocol}}</span></p>

  <p>主機名: <span>{{host}}</span></p>

  <p>埠號: <span>{{port}}</span></p>

  <p>雜湊值: <span>{{hash}}</span>
    <button ng-click="changeHash()">改變</button>
  </p>

  <p>search值序列化json:
    <span>{{search}}</span>
    <button ng-click="changeSearch_1()">改變1</button>
    <button ng-click="changeSearch_2()">改變2</button>
    <button ng-click="changeSearch_3()">改變3</button>
    <button ng-click="changeSearch_4()">改變4</button>
    <button ng-click="changeSearch_5()">改變5</button>
    <button ng-click="changeSearch_6()">改變6</button>
  </p>
</body>
</html>

js:

/*21.1 $location*/
var locationApp = angular.module('locationApp',[]);
locationApp.controller('locationCtrl',function($scope,$location,$timeout,$rootScope){
    $scope.absurl = $location.absUrl();
    $scope.url = $location.url();
    $scope.path = $location.path();
    $scope.protocol = $location.protocol();
    $scope.host = $location.host();
    $scope.port = $location.port();
    $scope.hash = $location.hash();
    $scope.search = $location.search();

    $scope.refresh = function(){
        $scope.absurl = $location.absUrl();
        $scope.url = $location.url();
        $scope.path = $location.path();
        $scope.hash = $location.hash();
        $scope.search = $location.search();
    };

    //重寫url部分,相應的absurl,url,path,hash,search都會改變
    $scope.changeUrl = function(){
        $location.url('/foo2?name=bunny2&age=12#myhash2');
    };

    //重寫path部分,相應的absurl,url,path都會改變
    $scope.changePath = 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
angular利用$location實現搜尋功能。

     
 
                

angular $location服務的主要作用是用於獲取當前url以及改變當前的url,也就是做搜尋功能。具體看你們後端給你們的api,拼成適合的字串


一. 獲取url的相關方法:

以 ‘http://localhost/$location/21.1%20$loc 



  
 

    


    
    
生成EXCEL文件是經常需要用到的功能，我們利用一些開源庫可以很容易實現這個功能。

     
 ger   gets   dispose   !=   mps   x11   xls   del   lai   方法一：利用excellibrary，http://code.google.com/p/excellibrary/
excellibrary是國人寫的開源組件，很容易使用，可惜貌似還不支持.xl 



  
 

    


    
    
(GoRails)在導航欄增加一個global自動的搜尋功能。

     
 Global Autocomplete Search 
EasyAutocomplete jQuery外掛。 
https://github.com/pawelczak/EasyAutocomplete 
http://easyautocomplete.com/guide#sec-data-file 
 
& 



  
 

    


    
    
Android開發：Toolbar與SearchView實現搜尋功能

     
  
 
  
  
 本文內容 
 本章介紹：用Toolbar和SearchView實現搜尋功能 
 設定主題  開啟res/values/styles.xml檔案，新增下面程式碼： 
     <style name="ThemeNoActionBar" parent="Theme.AppCompat 



  
 

    


    
    
Django 實現搜尋功能、分頁功能和個人理解

     
 
                最近在研究django的功能，分頁功能根據官方文件可以簡單的實現，但是如果配合上搜尋，對搜尋結果分頁就要稍微費點周折。

話不多少，先上程式碼。

一、搜尋配合分頁

# 獲取、判斷並封裝關keyword鍵搜尋
kw = request.GET.get("keyword",  



  
 

    


    
    
vue實現搜尋功能

     
 
                methods (要有一定的觸發條件才能執行，如點選事件)

<template>
  <div class="safetyInfo">
  	<input type="text" name="" id="" placeholder="搜尋" v 



  
 

    


    
    
Ajax實現搜尋功能的分頁

     
 
    //清空最大頁和當前頁，保證能夠多次搜尋
    function on()
    {
        $('#pageCurrent').val(''); 
        $('#maxys').val('');
    }
    //首頁
    function pageAjaxFirs 



  
 

    


    
    
jquery  實現篩選功能。

     
 
								
								            
							
							
							商品屬性篩選

商品的屬性篩選 是一個十分常見的功能，通常是同一型別的屬性只能選擇一個。例如 價格範圍，或者品牌，為了使選擇的內容看上去更直觀 ，一般都會將選擇項列出，並擁有點選取消 選擇 ，點選同類替 



  
 

    


    
    
vue+Element實現搜尋功能關鍵字高亮（Vue開發五）

     
 
							
							
							最近做了一個日誌搜尋的需求，要在頁面上實現海量日誌的關鍵字搜尋。為了搜尋更清晰，我最終實現了多條件搜尋，且搜尋結果的記錄中的關鍵字全部高亮。
一、實現思路
1 實時監控表格，實現關鍵字的定位；
2 點選搜尋按鈕以後，實現記錄中關鍵字的樣式變化（即高亮）。
二、實 



  
 

    


    
    
app專案實現列印功能。

     
 
                
1.實現列印圖片的簡單程式碼：

   UIPrintInteractionController *printC = [UIPrintInteractionControllersharedPrintController];
    UIPrintInfo *printInf 



  
 

    


    
    
使用UITextField實現搜尋功能

     
 
    使用UISearchBar實現搜尋功能時，搜尋欄高度不易調整，外觀也不易做成自己想要的樣式，又不想使用太複雜的方法，而使用UITextField可以實現這些功能又非常簡便，所以使用UITextField是個不錯的選擇。
     下面實現0-10000的數字搜尋
1，在.h檔案中實現UITableV 



  
 

    


    
    
【Android】EditText實現搜尋功能，把鍵盤迴車鍵改為搜尋；EditText隱藏游標

     
 
                
1、xml檔案中設定屬性
android:imeOptions="actionSearch"
                android:singleLine="true"
注：android:singleLine 已過期，不過設定為maxlines = 1  不會將回 



  
 

    


    
    
easyui Datagrid+searchbox 實現搜尋功能

     
 
                
說明:採用了ssh架構

這是搜尋前的介面:

這是根據使用者名稱搜尋後出現的搜尋結果:

1.前臺頁面:

<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>
<%
	S 



  
 

    


    
    
【程式設計之法】如何最快的判斷出短字串b中的所有字元是否都在長字串a中？編寫函式bool StringContain(string&b,string&a)實現此功能。

     
 
							
							
							舉例： 
如果字串a是“ABCD”，字串b是“BAD”，答案是true. 
如果字串a是“ABCD”，字串b是“BCE”，答案是false. 
如果字串a是“ABCD”，字串b是“AA”，答案是true.

此處列舉四種方法： 
解法一：蠻力輪詢 
也是一般最容 



  
 

    


    
    
簡單小例子，BOOTSTRAP+VUE實現購物車功能。

     
 
                看了vue的helloworld，試手做了個小例子。歡迎大家討論！<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8">
		<title>shopCar< 



  
 

    


    
    
Django之使用haystack+whoosh實現搜尋功能

     
 為了實現專案中的搜尋功能，我們使用的是全文檢索框架haystack+搜尋引擎whoosh+中文分詞包jieba
安裝和配置
安裝所需包

pip install django-haystack
pip install whoosh
pip install jieba

去settings檔案註 



  
 

    


    
    
easyUI 的easyui-treegrid 搜尋功能實現。

     
 
                function searchUserFun() {
    var keywords = $('#memID').val();
    alert(keywords);
    var url = encodeURI('/member/showTreeReconned?us 



  
 

    


    
    
CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

     
 posit   oct   padding   角色   sar   pac   osi   fse   ech   用Canvas實現五子棋的思路：
1、點擊棋盤，獲取坐標x，y，計算出棋子的二維數組坐標i和j，
2、棋子的實現，先arc一個圓，再填充漸變色。
3、下完一步棋後切換畫筆和角色。
4、贏法算法 



  
 

    


    
    
接口的多態使用；  接口應用實例：U盤、打印機可以使用共同的USB接口，插入到電腦上實現各自的功能。

     
 插入   應用   es2017   使用   bsp   功能   jpg   實現   -1   接口的多態使用


 接口應用實例：U盤、打印機可以使用共同的USB接口，插入到電腦上實現各自的功能。

 接口的多態使用；  接口應用實例：U盤、打印機可以使用共同的USB接口，插入到電腦上實現各自的功能。 



  
 

    


    
    
使用LinkedList存儲一副撲克牌，然後實現洗牌功能。

     
 pub   creat   link   his   println   數組   tostring   tint   poke   
/*
需求： 使用LinkedList存儲一副撲克牌，然後實現洗牌功能。



*/
//撲克類
class Poker{
    String  color; //花色