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>