Question

现在我想要使用ng-model值作为params进行ajax调用？我怎么做？我正在将ng-model设置为json数据，这是一个值。一切都很好。我允许这样做吗？如何在控制器中设置ng-model的范围？

控制器

EZlearn.controller("testController", function($scope, $http) {
$scope.test="false";
alert($scope.questions);
$scope.startTest = function(){  
    alert("starttest");
    $http({
        method : 'POST',
        url : 'startTest'
    }).success(function(data,status,headers,config){
        $scope.questions  = data;
        alert($scope.questions);
        if($scope.questions!=""){
            $scope.test="true"
            //window.location.href="welcome.jsp";
        }
    }).error(function(data,status,headers,config){
        alert("");
    });
}  })

HTML

<div data-ng-show="test" class="row">
    <form class="col-md-offset-2 col-md-8" action="evaluateTest" method="post">
        <div data-ng-repeat="qus in questions" data-ng-init="value=$index+1">
            <div class="form-group">
                <label>{{value}}. {{qus.question}}</label>  
                <div data-ng-if="qus.questionType=='Radio'">
                    <div data-ng-repeat="options in qus.options">
                        <input type="radio" name="answer{{value}}" data-ng-model="qus.questionNumber" value="{{options}}" >{{options}}
                    </div>
                </div>
                <div data-ng-if="qus.questionType=='Text'">
                    <input type="text" name="answer{{value}}" data-ng-model="qus.questionNumber" >
                </div>  
            </div>
        </div>  
        <input type="Submit" value="Submit Test" class="btn btn-success">
    </form>
</div>

Json数据

{"questions":[  
{
    "questionNumber":"qus_one",
    "questionType":"Radio",
    "question":"What is HTML?", 
    "options":["Hyper text markup language","Hyper text makeup language"]
},  
{
    "questionNumber":"qus_two",
    "questionType":"Radio",
    "question":"What is XML?", 
    "options":["Extra markup language","Extended markup language"]
},  
{
    "questionNumber":"",
    "questionType":"Text",
    "question":"If X = (2+2), then What is the value of X?"
},
{
    "questionNumber":"qus_four",
    "questionType":"Radio",
    "question":"Which command is used to display the top of the file?", 
    "options":["cat","head","more","grep","None of the above"]
},
{
    "questionNumber":"qus_five",
    "questionType":"Radio",
    "question":"Which command is used to remove a directory?", 
    "options":["rd","rmdir","rdir","didir","None of the above"]
}  ]}

Answer 1

更多的背景会有更好的答案，但我会尽我所能来概括。

据我们所知，你不能用ng-model调用函数（ajax可以存活的地方）。 ng-model的要点是设置控制器范围内的变量的值。如果你想调用一个函数（我猜测是值，状态或状态的变化）你可以通过$ watch来实现。

让watch功能检查在ng-model中设置的变量的值，当它被更改时，您可以检查新值并在触发手表时执行'stuff'。以下是指向示例的链接，您可以将其用作参考：https://www.sitepoint.com/mastering-watch-angularjs/

我建议创建一个范围变量并将其设置为某个任意值，并将ng-model指向您的变量。当手表被击中时，您可以检查newValue，如果它是您想要/期望的ajax请求。

此外，根据您使用的UI框架/包，您可以调用异步函数。例如在Angular Material中，select（一个下拉元素）你可以设置一个md-on-open的属性调用，它将调用一个函数（你在那里执行ajax请求）

如果这没有帮助，请提供更多信息，了解您正在做什么以及您正在使用哪些元素。

祝你好运！

Answer 2

试试这个（用于发送传统的GET请求参数）：

    $http({
    method: 'GET',
    url: '--your url ---',
    params: $scope.questions

    ).then(function(res){
        //success callback
   }, function(res){
     //failure callback
    });

或使用数据代替参数，如果您想指定POST请求正文。

    $http({
    method: 'POST',
    url: '--your url ---',
    data: $scope.questions

    ).then(function(res){
        //success callback
   }, function(res){
     //failure callback
    });

当然，如果不打算发送，请将$ scope.questions替换为您想要的数组。注意您发送的是对象。

Answer 3

首先，你需要注意，如果你有1.5.9的角度，在这个版本中$hhtp.sucess函数已被弃用，所以最好使用$http.then函数..

现在转向您的问题我认为有一个错误，我们data为object而data.question为array，您需要通过ng-repeat以下

＆lt; ----------这是你的控制器-------＆gt;

EZlearn.controller("testController", function($scope, $http) {
$scope.test="false";
alert($scope.questions);
$scope.startTest = function(){  
    alert("starttest");
    $http({
        method : 'POST',
        url : 'startTest'
    }).success(function(data,status,headers,config){
//        $scope.questions  = data; //     <======== Here is problem 
        $scope.questions  = data.questions; //DO this instead 
        alert($scope.questions);
        if($scope.questions!=""){
            $scope.test="true"
            //window.location.href="welcome.jsp";
        }
    }).error(function(data,status,headers,config){
        alert("");
    });
}  })

＆LT; -----的Html - ＆GT;

<div data-ng-show="test" class="row">
    <form class="col-md-offset-2 col-md-8" action="evaluateTest" method="post"> 

        <div data-ng-repeat="qus in questions" data-ng-init="value=$index+1">
            <div class="form-group">
                        <label>{{value}}. {{qus.question}}</label>  
            <div data-ng-if="qus.questionType=='Radio'">
                <div data-ng-repeat="options in qus.options">
                    <input type="radio" name="answer{{value}}" data-ng-model="qus.questionNumber" value="{{options}}" >{{options}}
                </div>
            </div>
            <div data-ng-if="qus.questionType=='Text'">
                    <input type="text" name="answer{{value}}" data-ng-model="qus.questionNumber" >
            </div>  
            </div>
        </div>  
        <input type="Submit" value="Submit Test" class="btn btn-success">
    </form>
</div>

将嵌套ng-repeat中的ng-model设置为params以进行ajax调用

3 个答案: