AngularJswatch监听inputvalue并请求数据办法

本文主要和大家分享AngularJs watch监听input value并请求数据的方法，希望能帮助到大家。

1、html input菜单和隐藏的控件

* 投放产品

该应用已被商务"{{haveName}}"录入国，可保持沟通

2、watch开始使用

1、JS 必须初始化$watch控件 ，ng-model=”chance.appName”

$scope.chance={ appName:null};

2、开始watch代码

1、一定注意是$watch，前面有美元符。里面是变量，变量前面没有$scope

2、在没有获取到值的情况下，提示控件，应该不显示。所以设置了变量$scope.ishaveName= false,注意JS头部初始化为false，只有当true的时候才会显示提示控件

3、在进入$watch的时候，就将上面2中的$scope.ishaveName设置为false

$scope.chance={ appName:null};$scope.ishaveName= false;

$scope.$watch('chance.appName',function () { $scope.ishaveName= false; if($scope.chance.appName!=null&&$scope.chance.appName!=undefined&&$scope.chance.appName!=''){ $http.get(ctx+'/chance/findAdminByAppName?appName='+$scope.chance.appName) .success(function (data,status) { if(data.result!=null){ $scope.haveName= data.result.name; $scope.ishaveName= true; } }) }});

3、后端代码

1、controller

@Controller@RequestMapping("chance")@ResourceFolder(folder = "module/chance/")public class ChanceController { @GetMapping("findAdminByAppName") @ResponseBody public ResponseBean findAdminByAppName(String appName){ try { return ResponseBean.buildSuccess(customerChanceService.findAdminByAppName(appName)); }catch (AppException e){return ResponseBean.buildFailure(e.getMessage()); } }}

2、service，当如果为登录人员自己设置的产品的时候，不需要提示自己，尽可能的提示其他人（傻子知道）。

//根据产品名字 ，查看是否有商务经理已经添加了该产品,选则一个不是自己的产品经理@Overridepublic SysAdminUser findAdminByAppName(String appName) { if("".equals(appName)||appName==null){ return null; } Long adminId = CasConfig.RemoteUserUtil.getRemoteUserId(); List sysAdminUsers = customerMapper.findAdminByAppName(appName); //有可能会出现多个人，那么首先如果是自己创建的话，就排除掉 if(sysAdminUsers.size()>0){ if(adminId.compareTo(sysAdminUsers.get(0).getId())==0){ sysAdminUsers.remove(0); } if(sysAdminUsers.size()>0){ return sysAdminUsers.get(0); } } return null;}

3、mapper

1、首先应该明确，我们这里获取的是管理人，所以要以管理人为核心。

SELECT s.* FROM `sys_admin_user` s left JOIN crm_customer_chance c on c.adminId = s.id where c.isVisible = 1 and c.adminId is not NULL and c.appName = #{_parameter} GROUP by id

.vue文件中监听input输入事件oninput详解