如何在 JSON 数组中发布数据答案

【问题标题】：How to post data in JSON array如何在 JSON 数组中发布数据
【发布时间】：2017-04-10 06:31:56
【问题描述】：

"type_of_advertisement":["ATM","Banner/Poster","Stalls"]

html代码是

    input(type='checkbox', value='Mobile/Communication Tower', ng-model='type_of_advertisement')
                | Mobile/Communication Tower
              label.checkbox-inline
                input(type='checkbox', value='Banner/Poster', ng-model='type_of_advertisement')
                | Banner/Poster
              label.checkbox-inline
                input(type='checkbox', value='Hoarding Board', ng-model='type_of_advertisement')
                | Hoarding Board
              label.checkbox-inline
                input(type='checkbox', value='Stalls', ng-model='type_of_advertisement')
                | Stalls
              label.checkbox-inline
                input(type='checkbox', value='Digital Offline Marketing', ng-model='type_of_advertisement')
                | Digital Offline Marketing
              label.checkbox-inline
                input(type='checkbox', value='Area for Product Display', ng-model='type_of_advertisement')
                | Area for Product Display

角码是

type_of_advertisement:[$scope.type_of_advertisement]

问题是当我点击一个复选框时，所有复选框都会自动选择。并获得类似的 api 响应

"type_of_advertisement":["true"]

那么我可以编写什么代码来获得所需的 api 结果。

【问题讨论】：

标签： javascript html angularjs json

【解决方案1】：

我会通过这样的数组来解决它：

$scope.rows = [{
    value: "Mobile/Communication Tower"
  }, {
    value: "Banner/Poster"
  }, {
    value: "Hoarding Board"
  }, {
    value: "Stalls"
  }];

和 HTML（在ng-repeat 内）：

<input type="checkbox" ng-model="row.selected" />{{row.value}}</label>

现在，在调用 API 之前，您可以重新设置数组，如下所示：

$scope.submit = function() {
    $scope.selectedRows = $scope.rows.reduce(function(arr, val) {
        if(val.selected) arr.push(val.value)
      return arr
    }, []);
  };

让$scope.selectedRows 变成这样的数组：

[
  "Banner/Poster",
  "Hoarding Board"
]

working example

【讨论】：

@aviralgarg 很高兴我能帮上忙 :)

【解决方案2】：

编辑：工作 Plunker - https://embed.plnkr.co/mJijSg/

所有元素都绑定到同一个ng-model。当你改变它的值时，所有的复选框都会改变。使用不同的ng-models。

在这个例子中，我写了几个复选框，ng-model 相同，ng-models 不同。

【讨论】：

【解决方案3】：

您可以在指令中使用要求ngmodel：

input(type='checkbox', data-toa="" value='Mobile/Communication Tower', ng-model='type_of_advertisement')
// at all the inputs put a directive called "toa" 

app.directive('toa', function() { //<---bind a directive here
   return {
     restrict: 'A', 
     require: '?ngModel', // get a hold of NgModelController
     link: function(scope, element, attrs, ngModel) {
       if (!ngModel) return; 

       element.on('change', function() {
         if(element.checked){
            scope.type_of_advertisement.push(element.value);
         }
       });
    }
});

【讨论】：