[英]Submitting an Array of Checkbox Values with AngularJS & Laravel 4. Checkboxes not Checking (Visually)
Update 更新
After experimenting more with the solution(s) from: How do I bind to list of checkbox values with AngularJS? 在对以下解决方案进行了更多实验之后: 如何使用AngularJS绑定到复选框值列表? I am a bit closer.
我离我近一点。 This is what I've updated my
<input type="checkbox">
to: 这就是我将
<input type="checkbox">
为:
<input
type="checkbox"
name="items[]"
value="{{ $item['item_id'] }}"
ng-checked="formData.items.indexOf({{$item['item_id']}}) > -1"
ng-click="toggleSelection({{$item['item_id']}})"
/>
Now, I can see the data being updated/logged to the console and watching the HTML via dev-tools I can see the checked="checked"
being added to the element. 现在,我可以看到数据正在更新/记录到控制台,并通过dev-tools观看了HTML,我可以看到将
checked="checked"
添加到了元素。 Although still not checked visually . 虽然仍然没有目视检查 。
I think for now, I will resort to using jQuery's $.post() method and continue my quest for getting a better handle on AngularJS fundamentals before attempting such types of trickery... probably better to now mix/mash my PHP/Blade/AngularJS so much anyway. 我想现在,我将继续使用jQuery的$ .post()方法,并继续尝试在尝试此类技巧之前更好地了解AngularJS基础...现在可能更好地混合/混合我的PHP / Blade /无论如何,AngularJS是如此。
End Update 结束更新
I am fairly new to AngularJS and am looking to integrate it into an existing Laravel 4 application (mostly for submitting/processing forms Asynchronously). 我对AngularJS相当陌生,希望将其集成到现有的Laravel 4应用程序中(主要用于异步提交/处理表单)。
The problem I am running into, in short, is that the checkbox portion of the form is not behaving as I expected. 简而言之,我遇到的问题是表单的复选框部分行为不如我预期。 Somehow AngularJS (I've narrowed it down to the problem happening when I encapsulate the code with the
<div ng-app> </div>
) is making my checkboxes funky. AngularJS以某种方式(我将其范围缩小到使用
<div ng-app> </div>
封装代码时发生的问题)使我的复选框变得时髦。
When I click the checkboxes they immediately "Uncheck". 当我单击复选框时,它们立即“取消选中”。 However, the data is passed through to my main.js on ng-submit.
但是,数据在ng-submit上传递到我的main.js。 Somehow they are being checked... without being checked visually.
不知何故正在对它们进行检查...而无需目测。 Makes perfect sense right?
完全合理吧?
I've been in and out of multiple articles, so here I am :) : 我读过多篇文章,所以在这里:):
The snippets below are mostly based on Scotch.io's: http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way 下面的代码片段大多是基于Scotch.io的: http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way
The AngularJS docs on Checkboxes: http://docs.angularjs.org/api/ng.directive:input.checkbox 复选框上的AngularJS文档: http ://docs.angularjs.org/api/ng.directive: input.checkbox
and a number of Stack Overflow articles (notably this one): How do I bind to list of checkbox values with AngularJS? 以及大量有关Stack Overflow的文章(特别是这篇文章): 如何使用AngularJS绑定到复选框值列表?
I guess it boils down to me wanting to generate the form with PHP/Laravel/Blade and just hand off the submission action/processing to AngularJS. 我想这归结为我想用PHP / Laravel / Blade生成表单,然后将提交动作/处理交给AngularJS。 I know I could convert the majority of this work to AngularJS/JavaScript, but for now would prefer to stick with the PHP generated form and insert the proper AngularJS attributes throughout.
我知道我可以将大部分工作转换为AngularJS / JavaScript,但目前更喜欢使用PHP生成的表单并在整个过程中插入适当的AngularJS属性。
Really, it is almost working for me (The text input field is submitting and being processed as I expected). 确实,它几乎对我有用(文本输入字段正在按预期方式提交和处理)。
Is there a better/simpler way for me to handle a list/array of checkbox values? 我是否有更好/更简单的方法来处理复选框值的列表/数组?
PHP Generated Form (with AngularJS attributes) -> AngularJS Magic/Submit/Functions -> PHP Process Data Return Results -> $http.success -> AngularJS Functions/$scope -> Reflect /ResultsChanges in HTML Form/Data PHP生成的表单(具有AngularJS属性)-> AngularJS Magic / Submit / Functions-> PHP过程数据返回结果-> $ http.success-> AngularJS Functions / $ scope-> Reflect / ResultsHTML表单/数据中的更改
<!-- 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>
I think the problem boils down to just syntax of your code. 我认为问题可以归结为代码的语法。
ng-controller
off the <form>
and add it to the div that has ng-app="formApp"
(not entirely sure why this works) ng-controller
移出<form>
并将其添加到具有ng-app="formApp"
的div中(不完全确定为什么这样做) <a>
tags surrounding your checkboxes. <a>
标记。 Now if you add this to the bottom of your HTML: 现在,如果将其添加到HTML的底部:
<pre>{{ formData }}</pre>
You should be able to see the data change immediately as you change the form. 更改表格后,您应该能够立即看到数据更改。
For example, when I tested I got: 例如,当我测试时,我得到:
{"test_message":"test","items":{"4":true,"5":true,"6":true}}
For the future, you'd probably want to move the Blade stuff out of there and pull all the data with $http
. 将来,您可能希望将Blade的内容移出,并使用
$http
提取所有数据。 This just ensures that in the future if you come back to look at the code, you know 100% that it all came from your JS code. 这只是确保将来如果您再次查看该代码,您将100%知道它们全部来自您的JS代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.