Question

更新

在尝试了更多来自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 /刀片/ 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

Checkbox上的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属性） - ＆gt; AngularJS Magic / Submit / Functions - ＆gt; PHP流程数据返回结果 - ＆gt; $ http.success - ＆gt; AngularJS函数/ $ scope - ＆gt; HTML表单/数据中的Reflect / 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>

Answer 1

两件事

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

将ng-controller移开<form>并将其添加到ng-app="formApp"的div（不完全确定原因为何）
删除复选框周围的<a>标记。

查看实时数据

现在，如果您将其添加到HTML的底部：

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

您应该能够在更改表单时立即看到数据发生变化。

例如，当我测试时，我得到了：

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

未来的东西

对于未来，您可能希望将Blade内容移出其中并使用$http提取所有数据。这只是确保将来如果您回过头来查看代码，您就会100％知道这一切都来自您的JS代码。

使用AngularJS＆amp;提交一组复选框值。 Laravel 4.复选框未检查（视觉上）

1 个答案:

两件事

查看实时数据

未来的东西