复选框未绑定到angularjs中的范围

Posted 2023-02-23

【中文标题】复选框未绑定到angularjs中的范围

【英文标题】：Checkbox not binding to scope in angularjs

【发布时间】：2013-09-09 15:28:20

【问题描述】：

我正在尝试使用 ng-model 将复选框绑定到范围。复选框的初始状态对应于范围模型就好了，但是当我选中/取消选中复选框时，模型不会改变。需要注意的是，模板是在运行时使用 ng-include 动态加载的

app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->

  $scope.billing_is_shipping = false
  $scope.bind_billing_to_shipping = ->
    console.log $scope.billing_is_shipping


<input type="checkbox" ng-model="billing_is_shipping"/>

当我选中该框时，控制台记录为假，当我取消选中该框时，控制台再次记录为假。我在范围上也有一个订单模型，如果我将复选框的模型更改为 order.billing_is_shipping，它工作正常

【参考方案1】：

扩展Matt's answer，请观看此 Egghead.io 视频，该视频解决了这个问题并提供了解释：Why binding properties directly to $scope can cause issues

见：https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

通常这是由于 ng-controller 之间的另一个指令 以及您正在创建新范围的输入。 When the select writes 输出它的值，它将把它写到最近的范围内，所以它 会将其写入此范围而不是更远的父级 离开。

最佳实践是永远不要直接绑定到作用域上的变量 在ng-model 中，这也被称为总是包含一个“点” 你的 ngmodel。

【讨论】：

这个答案完全依赖于外部链接。如果它们变得无效，您的答案将变得毫无用处。所以请编辑它并至少添加一个可以在那里找到的摘要。谢谢！

@FabioTurati 多么有先见之明！ youtube 视频现在无法播放！

@Dinesh 真的吗？这个对我有用。反正不光是我的想法，是SO的政策，原因是在这么大的范围内（这里有几百万个答案！）这个问题是必然会发生的，所以我们需要采取对策。跨度>

【参考方案2】：

我为这个问题苦苦挣扎了一段时间。有效的方法是将输入绑定到对象而不是原语。

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
$scope.someObject.someProperty = false

【讨论】：

我遇到了同样的问题，这解决了它。我想知道为什么原语不起作用（就像在official docs 中所做的那样）...

谢谢你！不知道为什么这不适用于原语，这可能只是 Angular 中的一个错误吗？

WHYYYYYY！！谢谢老兄，我欠你啤酒和饼干。另外，我可以为大家提供一个：我在同一页面上有四个复选框，复制/粘贴内容，在不同模型上进行相同的操作。好吧，两个有效，两个无效！

@mccc 我有那个确切的问题！！希望这能解决它！

伙计们，这个答案有点小题大做。我建议你阅读@zsong asnwer

【参考方案3】：

在我的指令中（在 link 函数中）我创建了范围变量 success，如下所示：

link: function(scope, element, attrs) 
            "use strict";

            scope.success = false;

并且在范围模板中包含输入标签，如：

<input type="checkbox" ng-model="success">

这不起作用。

最后我将范围变量更改为如下所示：

link: function(scope, element, attrs) 
            "use strict";

            scope.outcome = 
                success : false
            ;

我的输入标签看起来像这样：

<input type="checkbox" ng-model="outcome.success">

它现在按预期工作。我知道对此的解释，但忘记了，也许有人会为我填写。 :)

【讨论】：

投了赞成票！我已经在同一个问题上苦苦挣扎了将近两天（我们都在使用指令）。这挽救了我的生命和我的最后期限。感谢您分享这个！ =o)

【参考方案4】：

如果模板是使用ng-include 加载的，如果要通过单击复选框进行更新，则需要使用$parent 来访问父作用域中定义的模型，因为ng-include。

<div ng-app ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<script type="text/ng-template" id="template.html">
    <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>

function Ctrl($scope) 
    $scope.billing_is_shipping = true;

    $scope.checked = function()
        console.log($scope.billing_is_shipping);
    

DEMO

【讨论】：

另外，我在同一个模板中绑定了几个其他属性，而没有使用 $parent，它适用于那些

如果我将 billing_is_shipping 初始化为 true，则该复选框最初会被选中，因此它得到了正确的值，但由于某种原因没有将其绑定在该复选框上

我尝试的另一件事是复制复选框，我发现检查一个会检查另一个

@Chris 我为你创建了一个演示。如果你想从内部范围更新模型，你需要$parent。

也解决了我的问题，但为什么这适合我，而真正的答案却不适合，为什么？必须有一些解释。