单击单选按钮后调用Angular ajax
我想在我的应用程序中为管理控制台做一个CRUD部分。我使用的是mongodb、spring、bootstrap和angular。我在左边有一个单选按钮列表，其中包含集合的名称(集合的数量是可变的)，右边是一个数据标签，其中包含来自该datatable的文档，但尚未实现。逻辑是: admin单击左侧的一个单选按钮，之后我想向服务器发送一个名称为单选按钮的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和names中是可变的。
谢谢。
回答 2
Stack Overflow用户
发布于 2015-03-31 21:36:05
您需要在单选按钮代码中添加一个ng-change参数，该参数调用javascript代码中的函数，并引用已更改的单选按钮。
Stack Overflow用户
发布于 2015-03-31 22:26:30
使用指令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>https://stackoverflow.com/questions/29330568
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号