如何基于Angular.js在页面上单击的复选框构造.post查询？

Question

I have the following html form:

<form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'">
        One
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'">
        Two
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'">
        Three
    </p>
    <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button>
</form>

and it shows 3 checkboxes on my page and a button. I want to construct a .post query to my webservice based on the values user selects. I wrote a function for that:

$scope.queryUsers = function(){

    var one = $scope.formData.one;
    var two = $scope.formData.two;
    var three = $scope.formData.three;

    var params = [];

    if(one){

    }
    if(two){

    }
    if(three){

    }

    //here I want to create a .post query
};

As for now, I have my webservice ready, it takes the json in the following format:

"one":"true" //can be false
"two":"true" //can be false
"three":"true" //can be false

I want to create a params array and create post query - how can I fill this array with true or false values for each number based on the checkboxs' values?

Answer 1

official doc https://docs.angularjs.org/api/ng/service/ $http

Working plunkr : http://plnkr.co/edit/D7AV2DavhvNny9rppy4r?p=preview

You have to do inject '$http' in your controller depence :

myApp.controller('Ctrl1', ['$scope','$http',  function($scope,$http) {

then : JS

$scope.queryUsers = function() {
    console.clear();
    var one = $scope.formData.one;
    var two = $scope.formData.two;
    var three = $scope.formData.three;

    //here I want to create a .post query

    $http({
      method: 'POST',
      url: 'path/to/service', // put your url her
      data: {
        "one": one,
        "two": two,
        "three": three
      }

    }).then(function successCallback(response) {
      // success 
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

  };

html :

<form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-init="formData.one=false">
        One
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-init="formData.two=false">
        Two
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-init="formData.three=false">
        Three
    </p>
    <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryUsers()">Refresh</button>
</form>

Answer 2

1)You need to create an associative array,something like this:

 var app=angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.queryNumbers = function(){ var one = $scope.formData.one; var two = $scope.formData.two; var three = $scope.formData.three; var params = {}; params["one"]=one!='one'; params["two"]=two!='two'; params["three"]=three!='three'; console.log(params); }; }) 

 .done-true { text-decoration: line-through; color: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <form name="queryForm" class="form-inline text-center"> <p class="checkbox-inline onlinecheckbox"> <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'"> One </p> <p class="checkbox-inline onlinecheckbox"> <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'"> Two </p> <p class="checkbox-inline onlinecheckbox"> <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'"> Three </p> <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button> </form> </div> </div> 

2) Don't forget to send data to server using JSON.stringify(object) ;

JSON.stringify function turns a Javascript object into JSON text and stores it in a string.

In your case you need to use something like this:

$http({
  method: 'POST',
  url: 'you_method_url',
  data:JSON.stringify(params)
}).then(..);

Answer 3

You can use $http , but if you are calling a RESTful API, I would suggest you to use $resource (see documentation ).

See more here .

Personally, I prefer to use it inside of a service.

app.factory('Articles',
  ($resource) => (
    $resource(`/path/to/articles/:articleId`)
  ));

Answer 4

I would try to make things a bit more generic.

First at all is bad to have the same name attr for multiple input elements.

<form name="queryForm" class="form-inline text-center">
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="one" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'">One
  </p>
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="two" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'">Two
  </p>
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="three" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'">Three
  </p>
  <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button>
</form>

Then you can access the form by his name in the angular scope and play with the inputs inside without actally know the names!

var form = $scope.queryForm;
var params = [];

for (let name in form) {
  if (form.hasOwnProperty(name) && typeof form[name] === 'object' && form[name].hasOwnProperty('$modelValue')) {
    // build the array as you want here
    params.push($scope.formData[name]);
  }
}