AngularJs watch method to monitor input value and request data-JS Tutorial-php.cn

AngularJs watch method to monitor input value and request data

小云云

Release： 2018-03-07 14:21:19

Original

1944 people have browsed it

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>

Copy after login

2. Start using watch

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

$scope.chance={
    appName:null};

Copy after login

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;

Copy after login

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

                 }
             })
     }

});

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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!