AngularJs是基於MVC（Model（模型）-View（視圖）-Controller（控制器））思想的，在AngularJs應用中，視圖就是文檔對象模型（DOM），控制器是JavaScript類，模型中的數據就是存儲在對象中的屬性；視圖從模型中獲取數據，然後展示給用戶，當用戶點擊或者輸入與應用進行交互的時候，控制器將會作出響應並修改模型中的數據，模型會通過視圖數據發生了變更，這樣就可以刷新其中顯示的內容了；Controller把數據綁定到scope，通過scope給了Model，Model再通過scope給了View，scope相當於Model。
那麼，AngularJs與jQuery有什麼區別呢？
jquery主要是對DOM進行處理的，而AngularJs的主要是對於數據進行處理的，就change事件來說，如果jQuery不對DOM進行操作，是不會實現的，而angularjs不需要對DOM進行操作，利用雙向數據綁定就可以實現；
不得不說angularjs的mvc思想很強大，對應偏重於數據處理的項目還是非常有優勢的。
AngularJs下拉搜索框的一個demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs下拉搜索框</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
input,select{
width: 120px;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-change="changeKeyValue(textValue)" ng-model="textValue" value="{{textValue}}" ng-click="test()">
<div ng-hide="hide">
<select ng-change="change(x)" ng-model="x" multiple>
<option ng-repeat="data in datas">{{data}}</option>
</select>
</div>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl", function ($scope) {
//初始化一些數據
$scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框中的數據
$scope.copyDatas = $scope.datas; //下拉框中的數值拷貝一份
$scope.hide = true; //顯示隱藏下拉框
$scope.textValue = ""; //文本框數值
//將下拉選的數據值賦值給文本框，並且隱藏下拉框
$scope.change = function (x) {
$scope.hide = true; //下拉框隱藏
$scope.textValue = x; //文本框中的值
};
//獲取的數據值與下拉選逐個比較，如果包含則放在臨時變量副本，並用臨時變量副本替換下拉選原先的數值，如果數據爲空或找不到，就用初始下拉選項副本替換
$scope.changeKeyValue = function (v) {
var newData = []; //創建一個臨時下拉框副本
angular.forEach($scope.datas, function (data, index, array) {
//如果
if (data.indexOf(v)>=0){
newData.unshift(data);
}
});
$scope.datas = newData; //newData中的數值賦值給$scope.datas
$scope.hide = false; //文本框顯示
//如果不包含或者輸入框中的值爲空時，把拷貝出的$scope.copyDatas賦值給$scope.datas
if ($scope.datas.length==0||v==""){
$scope.datas = $scope.copyDatas;
}
};
//輸入框中的值必須是下拉選擇框中的數值
$scope.test = function () {
if($scope.datas.length>1){
$scope.hide = false;
}
};
console.log($scope.datas.length);
})
</script>
</body>
</html>