单击单选按钮后调用Angular ajax

时间:2015-03-29 14:49:31

标签: javascript jquery ajax angularjs

我想在我的应用程序中为管理控制台创建一个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和names中是可变的。

谢谢。

2 个答案:

答案 0 :(得分:0)

您需要在单选按钮代码中添加ng-change参数,该代码调用javascript代码中的函数,并引用已更改的单选按钮。

答案 1 :(得分:0)

使用指令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>