Question

我有以下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-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>

它在我的页面上显示3个复选框和一个按钮。我想根据用户选择的值为我的webservice构造一个.post查询。我为此写了一个函数：

$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
};

至于现在，我已准备好我的web服务，它采用以下格式的json：

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

我想创建一个params数组并创建帖子查询 - 如何根据复选框为每个数字填充此数组true或false个数字＆＃39;值？

Answer 1

官方文件 https://docs.angularjs.org/api/ng/service/ $ HTTP

工作plunkr：http://plnkr.co/edit/D7AV2DavhvNny9rppy4r?p=preview

你必须在你的控制器中注入“$ http”：

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

然后： 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）您需要创建一个关联数组，如下所示：

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）不要忘记使用JSON.stringify(object);

将数据发送到服务器

JSON.stringify函数将Javascript对象转换为JSON文本并将其存储在字符串中。

在你的情况下你需要使用这样的东西：

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

Answer 3

您可以使用$http，但如果您要调用 RESTful API，我建议您使用$resource（请参阅documentation）。

查看更多here。

就个人而言，我更喜欢在服务中使用它。

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

Answer 4

我会尝试让事情变得更通用。

首先，对于多个输入元素具有相同的name attr是不好的。

<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>

然后你可以在角度范围内通过他的name访问该表单，并在内部输入而不知道名字！

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]);
  }
}

如何基于Angular.js页面上的复选框构建.post查询？

4 个答案: