angular下拉框模糊查詢

2021-08-08 05:55:09 字數 1937 閱讀 6225

前兩天研究了一下angularjs,不得不說angularjs的mvc思想還是很強大的。對應偏重於資料處理的專案還是非常有優勢的。

寫了個搜尋下拉框的demo,注釋在裡邊都寫了,就不再這羅嗦了。

}

1文字框做輸入,並監控器change事件,在change事件中獲取輸入值,獲取的輸入值與選擇框中的各個下拉項進行比較

2如果包含則只顯示包含的部分,不包含則顯示全部

$scope.datas = ["key4","xyz","key3","***x","key2","value2","key1","value1"]; //下拉框選項

$scope.tempdatas = $scope.datas; //下拉框選項副本

$scope.hidden=true;//選擇框是否隱藏

$scope.searchfield='';//文字框資料

//將下拉選的資料值賦值給文字框

$scope.change=function(x)

//獲取的資料值與下拉選逐個比較,如果包含則放在臨時變數副本,並用臨時變數副本替換下拉選原先的數值,如果資料為空或找不到,就用初始下拉選項副本替換

$scope.changekeyvalue=function(v)

});

//用下拉選副本替換原來的資料

$scope.datas=newdate;

//下拉選展示

$scope.hidden=false;

//如果不包含或者輸入的是空字串則用初始變數副本做替換

if($scope.datas.length==0 || ''==v)

console.log($scope.datas);

} });

1文字框做輸入,並監控器change事件,在change事件中獲取輸入值,獲取的輸入值與選擇框中的各個下拉項進行比較

2如果包含則只顯示包含的部分,不包含則顯示全部

$scope.datas = ["key4","xyz","key3","***x","key2","value2","key1","value1"]; //下拉框選項

});

return ,

template:

''+

''+

' '+

' }'+

' '+

'',

// replace: true,

link: function($scope, elem, attr, ctrl)

//獲取的資料值與下拉選逐個比較,如果包含則放在臨時變數副本,並用臨時變數副本替換下拉選原先的數值,如果資料為空或找不到,就用初始下拉選項副本替換

$scope.changekeyvalue=function(v)

});

//用下拉選副本替換原來的資料

$scope.datas=newdate;

//下拉選展示

$scope.hidden=false;

//如果不包含或者輸入的是空字串則用初始變數副本做替換

if($scope.datas.length==0 || ''==v)

console.log($scope.datas);

} }

};

});

最終效果如下:

注意這裡對select標籤設定了multiple屬性,所以在頁面上input標籤能覆蓋select標籤

如果不用multiple屬性,需自行用div模擬實現select標籤效果

下拉框 列舉

列舉 public enum mchtprofitsplittype public string getvalue class 初始化中要放到下拉列表裡的 分賬方式列舉mchtprofitsplittype listorgprofitsplittypelist new arraylist mchtp...

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...

下拉框賦值

針對combox控制項,對下拉框賦值 domain ligercombobox data表示的就是資料來源,cancelable 如果設定為true,那就表示該下拉框中的值可以被刪除,叉掉,重新進行選擇。第二種情況是 如果將下拉框中的值不靈活使用,即寫死,那就如下建立資料來源 var test 其實...