更新

从溶液（多个）试验更后：How可以AngularJS绑定到复选框值列表？我有点接近。这是我已经更新了我＆LT;输入类型=复选框＆GT; 来：

 ＆LT;输入类型=复选框NAME =项目[]值={{$项目['ITEM_ID']}}纳克核对=formData.items.indexOf（{{$项['ITEM_ID']}}）-1个NG-点击=toggleSelection（{{$项目['ITEM_ID']}}）/＆GT; 

现在，我可以看到数据被更新/登录到控制台，并通过开发工具观看HTML我可以看到检查=选中添加到的元素。的虽然还没有肉眼检查的

我认为就目前而言，我将诉诸使用jQuery的$。员额（）方法，并继续我的追求试图这样类型的挂羊头卖狗肉的基本面才混得AngularJS更好地处理......可能会更好，现在混合/混搭我的PHP /刀片/ AngularJS这么多呢。

结束更新

我是相当新的AngularJS，我期待将它集成到现有的Laravel 4的应用程序（主要是提交异步/处理表格）。

我遇到了，总之，问题是，表单的复选框部分没有表现如我所料。不知怎的，AngularJS（我已经收窄到问题发生时，我封装code与＆LT; D​​IV NG-应用＆GT;＆LT; / DIV＆GT; ）是使我复选框时髦。

当我点击复选框他们马上取消选中。然而，数据是通过传递给我的main.js在NG-提交。不知怎的，他们正在检查...不被肉眼检查。非常有意义吧？

我一直在进出多篇文章，所以我在这里:)：

下面的代码片段大多是基于Scotch.io的： HTTP ：//scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way

在复选框的AngularJS文档： http://docs.angularjs.org/ API / ng.directive：input.checkbox

和一些堆栈溢出的文章（特别是这一个）：How可以AngularJS绑定到复选框值列表？

我猜它归结为我想用PHP生成/ Laravel /刀片的形式，只是手头宽裕提交诉讼/处理AngularJS。我知道我可以在大部分这项工作的转换为AngularJS / JavaScript的，但现在将preFER坚持使用PHP生成的表单，并插入正确的AngularJS整个属性。

真的，这几乎是为我工作（文本输入字段提交和我想象正在处理）。

有没有更好/更简单的办法，我来处理复选框值的列表/阵列？

PHP生成的表单（与AngularJS属性） - > AngularJS魔术/提交/功能 - > PHP过程数据返回结果 - > $ http.success - > AngularJS功能/ $范围 - >反映在HTML表单/数据/ ResultsChanges

 ＆LT;！ - 摘录拉出从HTML  - ＆GT;＆LT; D​​IV NG-应用=formApp＆GT;    ＆LT;形式NG提交=processForm（）NG控制器=MyFormControllerID =the_formNAME =the_form＆GT;        ＆所述;！ - 验证双向绑定。这对成功更新NG-提交=processForm（） - ＆GT;        ＆LT; H1＆GT; @ {{}信息}＆LT; / H1＆GT;        ＆LT;  - ！此提交/成功绑定...  - ＆GT;        ＆LT;输入NG模型=formData.test_message类型=文本名称=test_message级=输入LG＆GT;        @foreach（$ array_items为$项）            ＆LT; A＆GT;                ＆LT;标签={{$项目['ITEM_ID']}}＆GT;                    ＆LT;！ - 这些复选框不会检查！ （视觉）......然而，数据并成功地显示在JavaScript的console.dir（$参数（$ scope.formData））; - ＆GT;                    ＆LT;输入类型=复选框NG模型=。formData.items {{$项目['ITEM_ID']}}VALUE ={{$项目['ITEM_ID']}}/＆GT;                    标签文本在这里！                ＆LT; /标签＆gt;            ＆所述; / A＆GT;        @endforeach        ＆LT;按钮和GT;提交＆LT;！/按钮＆GT;    ＆LT; /表及GT;＆LT; / DIV＆GT;＆LT;！ - 摘录从JavaScript  - ＆GT;＆LT;脚本＆GT;VAR formApp = angular.module（'formApp'，[]）;功能MyFormController（$范围，$ HTTP）{    $ scope.formData = {};    $ scope.message =又一个默认的消息;    $ scope.items = {};    $ scope.processForm =功能（）{        的console.log（以下简称目录！）;        console.dir（$参数（$ scope.formData））;        的console.log（以下简称目录！）;        / **         *忽略此方法，直到数据/ HTML /形式的照顾         * /        返回        // $ HTTP（{        //方法：POST，        // URL：/ myapi / theurl'，        //数据：$ .PARAM（$ scope.formData），//传递数据串        //头：{内容类型：应用程序/ x-WWW的形式urlen codeD'} //设置的标头，以便为角表单数据（而不是请求负载）传递信息        //}）        // .success（功能（数据）{        //的console.log（数据）;        //如果（！data.success）{        // $ scope.message =失败;        //}其他{        // $ scope.message = data.message;        //}        //}）;    };}＆LT; / SCRIPT＆GT; 

解决方案

两件事情

我认为这个问题归结为只是你的code的语法。

将在 NG-控制器关闭＆LT;形式＆GT; ，并将其添加到具有DIV NG-应用=formApp（不完全知道为什么这个工程）删除＆LT;一个方式＆gt; 周边您复选框标记

看到实时数据

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

＆LT; pre＆GT; {{FORMDATA}}＆LT; / pre＆GT;

您应该可以立即看到数据的变化，你改变的形式。

例如，当我测试我：

{test_message：测试，项目：{4：真实的，5：真实的，6：真正}}

未来的东西

对于未来，你可能要移动的刃的东西离开那里，并与 $ HTTP 把所有的数据。这只是确保了，如果你回过头来看看在code中的未来，你知道100％，这一切都从你的JS code来了。

Update

After experimenting more with the solution(s) from: How can AngularJS bind to list of checkbox values? I am a bit closer. This is what I've updated my <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']}})"
/>    

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

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).

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.

When I click the checkboxes they immediately "Uncheck". However, the data is passed through to my main.js on ng-submit. 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

The AngularJS docs on Checkboxes: http://docs.angularjs.org/api/ng.directive:input.checkbox

and a number of Stack Overflow articles (notably this one): How can AngularJS bind to list of checkbox values?

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

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

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

解决方案

Two Things

I think the problem boils down to just syntax of your code.

Move the ng-controller off the <form> and add it to the div that has ng-app="formApp" (not entirely sure why this works) Remove the <a> tags surrounding your checkboxes.

Seeing Live Data

Now if you add this to the bottom of your 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}}

Future Stuff

For the future, you'd probably want to move the Blade stuff out of there and pull all the data with $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.