[英]Angular ajax call after clicking on radio button
我想在管理控制台的應用程序中加入CRUD部分。 我正在使用mongodb,spring,bootstrap和angular。 我在左側有一個單選按鈕列表,其中包含集合的名稱(集合的數量是可變的),而在右邊的數據表格中包含該數據表中尚未實現的文檔。 邏輯是:管理員單擊左側的單選按鈕,此后,我想使用單選按鈕的名稱向服務器發送ajax調用,響應將包含該集合中的文檔。
到現在為止,我有:
jsp內容:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/views/includes/script/header.jsp"/>
<script type="text/javascript" src="/res/custom_script/admin/main.js"> </script>
<script type="text/javascript" src="/res/custom_script/admin/common_admin_all.js"></script>
<script type="text/javascript">
angular.module("mainAdmin", [])
.controller("collectionsArray", function($scope) {
$scope.colnames = ${collectionNames};
});
</script>
<html>
<head>
<title>Main admin</title>
</head>
<body ng-app="mainAdmin">
<div class="container-fluid">
<p class="logout_paragraph">Logged as <strong>${pageContext.request.userPrincipal.name}</strong> | <a id="logout_link" onclick="formSubmit()">Logout</a></p>
<form action="/logout" method="post" id="logoutForm" style="display: none;">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
<div class="jumbotron">
<h2>Welcome !</h2>
</div>
<div id="divchkCollections" class="admin_left_menu pre-scrollable col-md-2">
<div ng-controller="collectionsArray" id="chkCollections" class="admin_collection_list radio">
<h4>Collections</h4>
<label ng-repeat="colname in colnames">
<input type="radio" name="chkCollectionsRadio" value="{{colname}}" class="radio-button"> {{colname}}
</label>
</div>
</div>
<div id="admin_data_table" class="col-md-10">
</div>
</div>
</body>
</html>
我怎樣才能從上面做出邏輯? 要在管理員單擊時將帶有廣播名稱的Ajax呼叫發送到服務器? 名稱列表在collectionNames中,並且在leght和名稱中是可變的。
謝謝。
您需要在單選按鈕代碼中添加一個ng-change參數,該代碼調用JavaScript代碼中的函數並引用已更改的單選按鈕。
使用指令ng-change將功能綁定到單選按鈕,然后使用ng-model將單選按鈕的值綁定到變量:
單擊單選按鈕時,將調用該函數,並且單選按鈕的值位於您在ng-model中綁定的變量中。
<input type="radio" name="radioName" value="red" ng-model="valueSelected" ng-change="onClick()">
然后在您的控制器中,在您分配給單選按鈕的函數中進行ajax調用:
<script type="text/javascript">
angular.module("mainAdmin", [])
.controller("collectionsArray", function($scope) {
$scope.colnames = ${collectionNames};
//function binded to the radio button on change
$scope.onClick = function (){
//alert to test that you send the radio button value
alert($scope.valueSelected);
//ajax call
$.ajax(
{url: "test",
success: function(data){
}});
}
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.