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>