angularjs 下拉搜尋框

2021-07-16 08:51:40 字數 1617 閱讀 3764

前兩天研究了一下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);

} }

};});

angularjs 選擇下拉框

names llr lla coco ckck ng controller myctrl 兩個不同寫法的下拉框一起使用,第二個會列出資料,但是不會有輸入框 問題 select下拉框單獨使用時沒事的,如果兩個不同寫法一起使用,第二個下拉框是包含option的會列出資料但不會出現輸入框 解決 把包含op...

帶搜尋框的select下拉框

利用select2製作帶有搜尋功能的select下拉框 1.引入線上css和js script 2.在select標籤內加入class屬性js example basic single value al alabama value wy wyoming select 3.呼叫js document ...

下拉框click事件與搜尋框blur事件的愛恨糾葛

參會單位聯想 input name company name bind input propertychange function datatype jsonp success function res company list html str this parent addclass layui...