> 웹 프론트엔드 > JS 튜토리얼 > 입력 값을 모니터링하고 데이터를 요청하는 AngularJs 감시 방법

입력 값을 모니터링하고 데이터를 요청하는 AngularJs 감시 방법

小云云
풀어 주다: 2018-03-07 14:21:19
원래의
1939명이 탐색했습니다.

이 기사에서는 주로 AngularJ의 입력 값 모니터링 및 데이터 요청 방법을 공유합니다.

입력 값을 모니터링하고 데이터를 요청하는 AngularJs 감시 방법

1. HTML 입력 메뉴 및 숨겨진 컨트롤

<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. watch 사용 시작

1. JS는 $watch 컨트롤, ng-model="chance.appName"

$scope.chance={
    appName:null};
로그인 후 복사

2을 초기화해야 합니다. 코드

1. 앞에 달러 기호가 있는 $watch라는 점에 유의하세요. 내부에 변수가 있고, 변수 앞에 $scope가 없습니다

2. 값을 얻지 못하면 프롬프트 컨트롤이 표시되지 않아야 합니다. 따라서 변수 $scope.ishaveName= false가 설정됩니다. JS 헤더는 false로 초기화됩니다. true일 경우에만 프롬프트 컨트롤이 표시됩니다

3. $watch를 입력할 때 위 2개의 Set에서 $scope.ishaveName을 변경하세요. to false


$scope.chance={
    appName:null};$scope.ishaveName= false;
로그인 후 복사

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

                 }
             })
     }

});
로그인 후 복사

3, 백엔드 코드


1, 컨트롤러


@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, 서비스. 로그인한 사람을 위해 제품을 설정할 때 직접 프롬프트할 필요가 없습니다. 가능한 한 많은 사람에게 메시지를 전달하세요. (바보들도 알죠)


//根据产品名字 ,查看是否有商务经理已经添加了该产品,选则一个不是自己的产品经理@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. 우선 여기서 얻는 것이 관리자이므로 관리자가 핵심이 되어야 한다는 점을 분명히 해야 합니다.


<!--根据产品,名字,看出是否已经有商务经理在维护了,根据产品名字 ,查看是否有商务经理已经添加了该产品,如果前台传入的参数我空,则通过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>
로그인 후 복사

관련 추천 :

.vue 파일 모니터링 입력 이벤트 oninput 상세 설명

위 내용은 입력 값을 모니터링하고 데이터를 요청하는 AngularJs 감시 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿