Question

我正在尝试在ng-repeat中添加一个复选框，然后使用$http选中的值进行发布。这是我的代码：

$scope.add_to_post = function(n){
        console.log("name",n);

        $http({
            method: 'POST',
            url: url,
            data: $.param({
                name: n,
            }),
            withCredentials: true,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        })
            .then(function successCallback(data) {
                console.log('post');
            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
    };

HTML：

<div >
   <ul ng-repeat="x in messages" style="list-style:none;">
    <li>
     {{x.name}}
    <input type="checkbox" ng-click="add_to_post(x.name)"/>
    </li>
  </ul>
<button ng-click="post()">post</button>

我希望我先检查一些checkboxes，然后单击post，然后$http个呼叫正在运行。我的朋克：http://next.plnkr.co/edit/zPu9DH0JyinlBvLh 感谢您的答复和事先的帮助！

Answer 1

在您的控制器中，您可以创建一个对象来存储复选框的模型（ng-model），如下所示：

$scope.modelCheck = {};

然后在html中，您可以像这样绑定它们：

<input type="checkbox" ng-model="modelCheck[x.name]"/>

最后，当您要进行POST时，请收集复选框名称，并在其中将其标记为true，如下所示：

$scope.post = function(){
    var data = [];
       for (var k in $scope.modelCheck) {
           // `k` is own property (checkbox name) and its value is `true`
           if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
            data.push({'name': k});
           }
       }
       console.log(data);
       // do with data as you wish from here
    };

查看此Forked working plunker（请参阅控制台）

检查ng-repeat和$ http中的值将其发布到AngularJs

1 个答案: