AngularJs下拉搜索框

来源：互联网发布：网络存储一体机系统编辑：程序博客网时间：2024/05/22 11:47

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>

1 0