使用 AngularJS 和 Laravel 4 提交复选框值数组。复选框未检查(视觉上)

2023-12-28

Update

在对以下解决方案进行更多实验后:如何使用 AngularJS 绑定到复选框值列表? https://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values我离得近一点。这就是我更新的内容<input type="checkbox"> to:

<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 http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way

关于复选框的 AngularJS 文档:http://docs.angularjs.org/api/ng.directive:input.checkbox http://docs.angularjs.org/api/ng.directive:input.checkbox

以及一些 Stack Overflow 文章(尤其是这篇文章):如何使用 AngularJS 绑定到复选框值列表? https://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values

我想这可以归结为我想用 PHP/Laravel/Blade 生成表单,然后将提交操作/处理交给 AngularJS。我知道我可以将大部分工作转换为 AngularJS/JavaScript,但现在更愿意坚持使用 PHP 生成的表单并在整个过程中插入正确的 AngularJS 属性。

真的,它几乎对我有用(文本输入字段正在按我的预期提交和处理)。

有没有更好/更简单的方法来处理复选框值的列表/数组?

PHP 生成的表单(带有 AngularJS 属性) -> AngularJS Magic/Submit/Functions -> PHP 处理数据返回结果 -> $http.success -> AngularJS Functions/$scope -> 在 HTML 表单/数据中反映 /ResultsChanges

<!-- 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>

两件事情

我认为问题归结为代码的语法。

  1. 移动ng-controller关闭<form>并将其添加到具有ng-app="formApp"(不完全确定为什么这有效)
  2. 去除<a>复选框周围的标签。

查看实时数据

现在,如果您将其添加到 HTML 的底部:

<pre>{{ formData }}</pre>

当您更改表单时,您应该能够立即看到数据更改。

例如,当我测试时,我得到:

{"test_message":"test","items":{"4":true,"5":true,"6":true}}

未来的东西

对于未来,您可能希望将 Blade 的东西移出那里并使用$http。这只是确保将来如果你回来查看代码,你100%知道这一切都来自你的JS代码。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 AngularJS 和 Laravel 4 提交复选框值数组。复选框未检查(视觉上) 的相关文章

随机推荐