Как передать массив Input на сервер в Angular JS?

Question

Как передать массив Input на сервер в Angular JS?

Рейтинг: 1Ответов: 2Опубликовано: 24.04.2015

Как в Angular JS собрать значения полей:

<input type="checkbox" name="type[]" value="1"/>
<input type="checkbox" name="type[]" value="2"/>
<input type="checkbox" name="type[]" value="3"/>

И отправить на сервер?

Сейчас пробовал сделать так:

<input type="checkbox" required="" value="1" ng-model="formData.type[1]">
<input type="checkbox" required="" value="2" ng-model="formData.type[2]">
<input type="checkbox" required="" value="3" ng-model="formData.type[3]">

Но проблема в том, что на сервер данные приходят в таком формате:

array(1) {
  [1] => string(4) "true",
  [2] => string(4) "true",
  [3] => string(4) "true",
}

angularjs

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Можно так:

<input type="checkbox"  ng-click="select('1')">1
<input type="checkbox"  ng-click="select('2')">2
<input type="checkbox"  ng-click="select('3')">3

В контроллере:

    $scope.checkboxValuesArray = [];
    $scope.select = function (checkBoxValue) {
    var index = $scope.checkboxValuesArray.indexOf(checkBoxValue);
    if (index > -1) {
      $scope.checkboxValuesArray.splice(index, 1);
    }
    else {
      $scope.checkboxValuesArray.push(checkBoxValue);
    }};

На сервер передаём checkboxValuesArray. Вот, есть даже пример. Если используем привязку, то немного модифицируем

<input type="checkbox" value="{{cbxValue}}"  ng-click="select(cbxValue)">{{cbxValue}}

Answer 2

▲ 2

А можно написать свою директиву. Например, так https://jsfiddle.net/thnbycwk/

angular.module('myApp', [])
.controller('MyController', function($scope){
    $scope.values = ["1","2","3","4","5","6"];
    $scope.selectedValues = ["6"];
    $scope.sendData = function(){
         console.log($scope.selectedValues);
    };
})
.directive('checkboxes', function($timeout){
    return {
        template: '<input ng-repeat="v in values" type="checkbox" value="{{v}}" ng-checked="selectedValues.indexOf(v) >= 0"/>',
        scope:  {
           values: '=',
           selectedValues: '='
        },
        link: function(scope, element, attrs){
            $timeout(function(){
                var el = element[0];
                do{
                     if(el.nodeName.toLowerCase() === 'input'){
                        angular.element(el).on('change', function(){
                            var self = this;
                            scope.$apply(function(){
                                if(self.checked){
                                    scope.selectedValues = scope.selectedValues.concat([self.value]);
                                }
                                else{
                                    scope.selectedValues = scope.selectedValues.filter(function(v){return v !== self.value});
                                }
                            });
                        });
                        
                    }
                    el = el.nextElementSibling
                }
                while(el);
            });
        },
        replace: true
    };
});



angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-controller="MyController">
     <pre>{{selectedValues}}</pre>

     <form ng-submit="sendData">
          <checkboxes values="values" selected-values="selectedValues" />
          <button type="submit">Send</button>
      </form>
 </div>

Как передать массив Input на сервер в Angular JS?

Ответы