加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs中watch使用--实现项目中时时搜索

发布时间:2020-12-17 10:09:42 所属栏目:安全 来源:网络整理
导读:重点内容 :用ng-model 定义一个变量, 用watch方法进行时时的监听 html5中定义一个ng-model js文件中首先给ng-model 一个初始值 *js文件实现watch方法, 进行变量的时时监听 代码块(项目中做的时时搜索为例) html5中定义一个ng-model变量,也是一个搜索框

重点内容 :用ng-model 定义一个变量, 用watch方法进行时时的监听

  • html5中定义一个ng-model
  • js文件中首先给ng-model 一个初始值
  • *js文件实现watch方法, 进行变量的时时监听

代码块(项目中做的时时搜索为例)

html5中定义一个ng-model变量,也是一个搜索框的实现例如:

<ion-nav-buttons side="center">
        <!-- 设置搜索框 -->
        <input type="text"  class="form-control" id="name" placeholder="请输入项目名称" style="height: 25px;margin-top:5px;padding-top:5px;text-align:left;line-height: 25px;" ng-model= "showName.item"ng-style="myWidth"> </ion-nav-buttons>

js文件中初始化ng-model 例如:

$scope.showName = {item:''};

js文件中实现watch方法的时时监听例如:

$scope.$watch('showName.item',function() {

   ``` 要实现的方法, 具体问题具体分析, 本人项目中这选择的是请求搜索的结果代码如下:
   if($scope.showName.item != '') {

                projectHTTP.search($scope.showName.item,function(data){

                    if(data.data != null && data.data.length != 0){

                        $scope.projectListName = data.data;
                        setUserJsonCache("searchList",$scope.projectListName);
                    } else {

                        $scope.projectListName = [];
                    }

                });
            }
});

脚注

生成一个脚注1.


  1. 本人并没有介绍具体网络请求的实现, 会在接下来的文章中提及到, 另外watch还有多中用法需要的亲们可以调研. ?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读