Отправка массива значений флажка с помощью AngularJS & Laravel 4. Флажки не проверяются (визуально)

Обновить

После того, как вы больше экспериментируете с решением (-ами) из: Как привязать к списку значений флажка с помощью AngularJS? Я немного ближе. Это то, что я обновил свой <input type="checkbox"> чтобы:

• Laravel angularjs Request :: ajax () всегда false
• Laravel Mail :: send () отправка нескольких адресов или адресов
• Как установить значение по умолчанию для столбца временной метки в текущую временную метку с миграциями Laravel?
• PHP - использовать базу данных в слое просмотра MVC (Laravel Blade)
• Излучающий входной фасад в Laravel 4

 <input type="checkbox" name="items[]" value="{{ $item['item_id'] }}" ng-checked="formData.items.indexOf({{$item['item_id']}}) > -1" ng-click="toggleSelection({{$item['item_id']}})" /> 

Теперь я могу видеть, что данные обновляются / записываются на консоль и просматривают HTML через dev-tools. Я могу видеть, что checked="checked" на добавление элемента. Хотя все еще не проверяется визуально .

Я думаю, на данный момент я прибегну к использованию метода $ .post () jQuery и продолжу поиски лучшего понимания основ AngularJS, прежде чем пытаться использовать такие типы обмана … возможно, теперь лучше смешивать / размывать мои PHP / Blade / В любом случае, AngularJS.

Окончательное обновление

Я довольно новичок в AngularJS и хочу интегрировать его в существующее приложение Laravel 4 (в основном для отправки / обработки форм асинхронно).

Короче говоря, проблема заключается в том, что часть флажка формы не ведет себя так, как я ожидал. Как-то AngularJS (я сузил его до проблемы, возникающей при инкапсуляции кода с помощью <div ng-app> </div> ) делает мои флажки фанки.

Когда я нажимаю флажки, они сразу же «Убирают». Однако данные передаются на мой main.js на ng-submit. Как-то их проверяют … не проверяя визуально. Совершенно верно?

Я был в нескольких статьях и из них, так вот я: 🙂

Ниже приведенные ниже фрагменты основаны на файле Scotch.io: http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way

Документы AngularJS на флажках: http://docs.angularjs.org/api/ng.directive:input.checkbox

и ряд статей переполнения стека (особенно этот): как мне привязать к списку значений флажка с помощью AngularJS?

Я думаю, это сводится к тому, что я хочу создать форму с помощью PHP / Laravel / Blade и просто передать действие / обработку отправки в AngularJS. Я знаю, что могу преобразовать большую часть этой работы в AngularJS / JavaScript, но теперь предпочел бы придерживаться сформированной PHP-формы и вставлять соответствующие атрибуты AngularJS.

На самом деле, он почти работает для меня (поле ввода текста отправляется и обрабатывается, как я и ожидал).

Есть ли лучший / более простой способ обработки списка / массива значений флажка?

PHP сгенерированная форма (с атрибутами AngularJS) -> AngularJS Magic / Submit / Functions -> Результаты возврата данных процесса PHP -> $ http.success -> Функции AngularJS / $ scope -> Reflect / ResultsChanges в HTML-форме / данных

 <!-- Snippet Pull out From HTML --> <div ng-app="formApp"> <form ng-submit="processForm()" ng-controller="MyFormController" id="the_form" name="the_form"> <!-- Verify the two-way binding. This updates successfully on ng-submit="processForm()" --> <h1>@{{message}}</h1> <!-- This submits/binds successfully ... --> <input ng-model="formData.test_message" type="text" name="test_message" class="input-lg"> @foreach($array_items as $item) <a> <label for="{{ $item['item_id'] }}"> <!-- These Checkboxes will not Check! (Visually) ... However the data does show up successfully in the JavaScript console.dir($.param( $scope.formData) ); --> <input type="checkbox" ng-model="formData.items.{{ $item['item_id'] }}" value="{{ $item['item_id'] }}" /> Label Text Here! </label> </a> @endforeach <button>Submit That!</button> </form> </div> <!-- Snippet from JavaScript --> <script> var formApp = angular.module('formApp', []); function MyFormController($scope, $http) { $scope.formData = {}; $scope.message = "Just another default message"; $scope.items = {}; $scope.processForm = function() { console.log("The Dir!"); console.dir($.param( $scope.formData) ); console.log("The Dir!"); /** * Ignoring this method until data/html/form is taken care of */ return // $http({ // method : 'POST', // url : '/myapi/theurl', // data : $.param($scope.formData), // pass in data as strings // headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload) // }) // .success(function(data) { // console.log(data); // if (!data.success) { // $scope.message = "Fail"; // } else { // $scope.message = data.message; // } // }); }; } </script>