CODEWITHSUNDEEP
javascripthtmlangularjsjson
aviral garg
aviral garg

Reputation: 31

How to post data in JSON array

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

html code is 

    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

angular code is

type_of_advertisement:[$scope.type_of_advertisement]

The problem occurs is when i hit a one check box all check boxes automatic select. and get the api response like

"type_of_advertisement":["true"]

So what can i code so i get the desired api result.

Upvotes: 0

Views: 91

Answers (3)

tanmay
tanmay

Reputation: 7911

I would solve it by having an array like this:

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

And HTML (inside ng-repeat): 

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

Now, before calling API, you can reform your array, something like this:

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

to get $scope.selectedRows becomean array like this:

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

working example

Upvotes: 2

Jai
Jai

Reputation: 74738

You can make use of requiring ngmodel in a directive: 

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

Upvotes: 0

Raphael Parreira
Raphael Parreira

Reputation: 468

Edit: Working Plunker - https://embed.plnkr.co/mJijSg/

All the elements are binded to the same ng-model. When you change its value, all the checkboxes will change. Use differents ng-models.

In this example, I wrote several checkboxes with the same ng-model and differents ng-models.

Upvotes: 0

Related Questions