ホームページ >ウェブフロントエンド >jsチュートリアル >入力値を監視し、データをリクエストするための AngularJs 監視メソッド

入力値を監視し、データをリクエストするための AngularJs 監視メソッド

小云云
小云云オリジナル
2018-03-07 14:21:191947ブラウズ

この記事では、主に AngularJs ウォッチで入力値を監視し、データをリクエストする方法について説明します。

入力値を監視し、データをリクエストするための 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};
)。コード

1. 先頭にドル記号が付いているのが $watch であることに注意してください。内部に変数があり、変数の前に $scope がありません

2. 値が取得されない場合、プロンプト コントロールは表示されません。したがって、変数 $scope.ishaveName= false が設定されます。 true の場合にのみ、プロンプト コントロールが表示されることに注意してください。 $scope.ishaveName を上記 2 つのセットに変更します。 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. マッパー

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。