angular1与jquery结合使用注意项

想拥有自己的服务器？价钱太贵，便宜的配置太低。。。总是处于各种原因，现在特大好消息，阿里云服务器活动，价钱低到爆，快来了解下，2核4G，3年低至699，时间有限，还剩10天，快来选购吧，地址：

https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=IAq264WFLl

另附优惠券链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=1x6hctq1

讲述楼主遇到的一个小坑

页面局部代码

 

<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;
        }
    }

}

 

 

 

页面效果

 

点击选中项自动补全