angular1与jquery结合使用注意项

来源：互联网发布：刷人气软件编辑：程序博客网时间：2024/06/07 12:20

讲述楼主遇到的一个小坑

页面局部代码

<div class="fl">    <input type="text" ng-model="queryProjectId"  ng-keyup="listProjectForAdmin('id')"/>    <div id="query_id" class="query-project">        <ul>            <li ng-click="queryOkProject('id')" ng-repeat="pro in answerProject|limitTo:5 ">{{pro.projectId}}</li>        </ul>    </div></div>

控制器代码

$scope.projectType = $stateParams.projectType;//项目类型$scope.listProjectForAdmin = listProjectForAdmin;//模糊查询$scope.queryOkProject = queryOkProject;//选中填充$scope.queryProjectId = "";$scope.queryProject = {};$scope.project = {};$scope.project.subjectStockHolders = [];function listProjectForAdmin(type) {    debugger;    queryParams.projectId = $scope.queryProjectId;    queryParams.projectName = $scope.queryProjectName;    addProjectServ.listProjectForAdmin(queryParams).then(        function(data){            $scope.answerProject = data.list;            debugger;            if(type=="id"){                $("#query_id").css('display','block');                var dropdownList = $("#query_id").find('ul');                dropdownList.slideDown('fast');            }else{                $("#query_name").css('display','block');                var dropdownList = $("#query_name").find('ul');                dropdownList.slideDown('fast');            }        },function(error){            console.error("查询错误");        }    );}function queryOkProject(type) {    $(document).on('click','.query-project li',function(){        if(type=="id"){            debugger;            $scope.queryProjectId = $(this).text();            $("#query_id").css('display','none');            findNameById($scope.queryProjectId );            $scope.$apply();//必须要如果不加angular双向数据绑定就没有应用到页面有延迟        }else{            $scope.queryProjectName = $(this).text();            $("#query_name").css('display','none');            findIdByName($scope.queryProjectName);            $scope.$apply();//必须要如果不加angular双向数据绑定就没有应用到页面有延迟        }    });}function findNameById(id) {    for (var a = 0;a<$scope.answerProject.length;a++){        if($scope.answerProject[a].projectId == id){            $scope.queryProjectName = $scope.answerProject[a].projectName;            $scope.$apply();//必须要如果不加angular双向数据绑定就没有应用到页面有延迟            return;        }    }}function findIdByName(name) {    for (var a = 0;a<$scope.answerProject.length;a++){        if($scope.answerProject[a].projectName == name){            $scope.queryProjectId = $scope.answerProject[a].projectId;            $scope.$apply();//必须要如果不加angular双向数据绑定就没有应用到页面有延迟            return;        }    }}

页面效果

点击选中项自动补全

0 0