AngularJs watch method to monitor input value and request data

This article mainly shares with you the method of AngularJs watch to monitor input value and request data. I hope it can help you.

1. html input menu and hidden controls

<p class="form-pider"></p>
<p class="form-item form-remark">
    <p class="item-title"><span class="adError">*</span> 投放产品</p>
    <input name="app" ng-model="chance.appName" type="text" class="item-select" placeholder="请填写产品名称">
</p>
<p ng-if="ishaveName==true" class="margin-top-1 adError">
    该应用已被商务"{{haveName}}"录入国，可保持沟通
</p>

2. Start using watch

1. JS must be initialized $watch control, ng-model="chance.appName"

$scope.chance={
    appName:null};

2. Start watch code

1. Be sure to note that it is $watch, with a dollar sign in front. There are variables inside, and there is no $scope

in front of the variables. 2. If the value is not obtained, the prompt control should not be displayed. So the variable $scope.ishaveName= false is set. Note that the JS header is initialized to false. Only when true will the prompt control be displayed.

3. When entering $watch, change the above 2 $scope.ishaveName is set to 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, backend code

---

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, when you set up a product for the logged-in person, you don’t need to prompt yourself. Try to prompt others as much as possible (fools know).

---

//根据产品名字 ，查看是否有商务经理已经添加了该产品,选则一个不是自己的产品经理@Overridepublic SysAdminUser findAdminByAppName(String appName) {    if("".equals(appName)||appName==null){        return null;
    }
    Long adminId = CasConfig.RemoteUserUtil.getRemoteUserId();

    List<SysAdminUser> 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. First of all, it should be clear that what we are getting here is managers, so we must focus on managers.

---

<!--根据产品，名字，看出是否已经有商务经理在维护了，根据产品名字 ，查看是否有商务经理已经添加了该产品,如果前台传入的参数我空，则通过java判断，不能进入本sql，`否则会出错`-->
    <select id="findAdminByAppName" resultType="com.duodian.admore.entity.db.admin.SysAdminUser">        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
        <if test="_parameter != null and _parameter!= &#39;&#39;">            and c.appName = #{_parameter}
        </if>        GROUP by id
    </select>

</mapper>

Related recommendations:

.vue file monitoring input input event oninput detailed explanation

The above is the detailed content of AngularJs watch method to monitor input value and request data. For more information, please follow other related articles on the PHP Chinese website!