更新
在对以下解决方案进行更多试验后:How do I bind to list of checkbox values with AngularJS?我离得近一点。这就是我更新我的 <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']}})"
/>
现在,我可以看到正在更新/记录到控制台的数据并通过开发工具查看 HTML 我可以看到 checked="checked"
被添加到元素中。 尽管仍未通过目视检查。
我想现在,我会求助于使用 jQuery 的 $.post() 方法,并继续寻求更好地掌握 AngularJS 基础知识,然后再尝试此类技巧……现在混合/混搭我的 PHP 可能更好/Blade/AngularJS 这么多。
结束更新
我是 AngularJS 的新手,希望将它集成到现有的 Laravel 4 应用程序中(主要用于异步提交/处理表单)。
简而言之,我遇到的问题是表单的复选框部分没有按照我的预期运行。 AngularJS(我已将其缩小为使用 <div ng-app> </div>
封装代码时发生的问题)以某种方式使我的复选框变得古怪。
当我单击复选框时,它们会立即“取消选中”。但是,数据会在 ng-submit 上传递到我的 main.js。他们正在以某种方式被检查……而没有被目视检查。很有道理吧?
我已经进出多篇文章,所以我在这里 :) :
以下片段主要基于 Scotch.io 的:http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way
有关复选框的 AngularJS 文档:http://docs.angularjs.org/api/ng.directive:input.checkbox
和一些 Stack Overflow 文章(尤其是这篇):How do I bind to list of checkbox values with AngularJS?
我想这归结为我想用 PHP/Laravel/Blade 生成表单,然后将提交操作/处理交给 AngularJS。我知道我可以将这项工作的大部分转换为 AngularJS/JavaScript,但现在我更愿意坚持使用 PHP 生成的表单并在整个过程中插入适当的 AngularJS 属性。
真的,它几乎对我有用(文本输入字段正在按我的预期提交和处理)。
有没有更好/更简单的方法来处理复选框值的列表/数组?
PHP 生成的表单(带有 AngularJS 属性)-> AngularJS Magic/Submit/Functions -> PHP Process Data Return Results -> $http.success -> AngularJS Functions/$scope -> Reflect/ResultsChanges in HTML Form/Data
<!-- 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>
最佳答案
两件事
我认为问题归结为代码的语法。
- 移动
ng-controller
关闭<form>
并将其添加到具有ng-app="formApp"
的 div (不完全确定为什么会这样) - 删除
<a>
复选框周围的标签。
查看实时数据
现在,如果您将此添加到 HTML 的底部:
<pre>{{ formData }}</pre>
您应该能够在更改表单时立即看到数据更改。
例如,当我测试时我得到:
{"test_message":"test","items":{"4":true,"5":true,"6":true}}
future 的东西
对于 future ,您可能希望将 Blade 的东西移出那里并使用 $http
提取所有数据。 .这只是确保将来如果您回头看代码,您会 100% 知道它全部来自您的 JS 代码。
关于javascript - 使用 AngularJS 和 Laravel 4 提交复选框值数组。复选框不检查(视觉上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20845713/