Question

"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结果。

Answer 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

Answer 2

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

所有元素都绑定到同一个ng-model。更改其值后，所有复选框都将更改。使用不同的ng-models。

在此示例中，我使用相同的ng-model和不同的ng-models写了几个复选框。

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

如何在JSON数组中发布数据

3 个答案: