如何使用带有复选框值的 ng-model？答案

【问题标题】：How to use ng-model with checkbox value?如何使用带有复选框值的 ng-model？
【发布时间】：2016-09-09 04:28:37
【问题描述】：

我想要这个：

应同时或分别检查/取消检查日期时间和对象的摘要行。我的显示像照片：

我使用 ng-model。我的复选框代码如下：

 <div class='ui-widget-header ui-corner-all pw-chart-header' style="padding-left:12px ">
                                            <input type="checkbox" value="3" style="vertical-align: middle; margin: 0" id="selectsummarizationType" ng-model="summarizationtypeBoth" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Summary Row
                                        </div>


      <div style="padding-top:10px ; padding-bottom:10px; padding-left:10px ; padding-right:10px">
                                                   <label for="uxDatetime">
                                                     <input type="checkbox" value="1" style="vertical-align: middle; margin: 0" id="uxDatetime" name="uxDatetime" ng-model="summarizationtypeDate" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Datetime
                                                   </label>
                                                   <label for="uxObject" style="float: right">
                                                     <input type="checkbox" value="2" style="vertical-align: middle; margin: 0" id="uxObject"  name="uxObject" ng-model="summarizationtypeObject" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Object
                                                   </label>
                                                </div>

这是 ng-model (js) 代码：

$scope.$watch('summarizationtypeBoth', function () {

                });
                $scope.$watch('summarizationtypeDate', function () {

                });
                $scope.$watch('summarizationtypeObject', function () {

                });

如何使用 ng-model 那么我该如何编写？请。

【问题讨论】：

将 ng-change 放在摘要输入上并设置其他两个。
如果我了解您的问题，请检查此 plunker plnkr.co/edit/wYmWXnu5Ld2SmUdGayfd?p=preview
我认为这对我有帮助，但我该怎么做：将 ng-change 放在摘要输入上并设置其他两个。顺便感谢您的回答@YOU

标签： javascript angularjs checkbox angularjs-ng-model

【解决方案1】：

使用 ng-change 属性：

<input type="checkbox" value="3" style="vertical-align: middle; margin: 0" id="selectsummarizationType" ng-model="summarizationtypeBoth" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid" ng-change="summaryChecked()"> Summary Row

在你的控制器中

$scope.summaryChecked = function() { 
   $scope.summarizationtypeDate = $scope.summarizationtypeBoth
   $scope.summarizationtypeObject= $scope.summarizationtypeBoth
}

看到这个笨蛋https://plnkr.co/edit/ztL4nC6JYDv1lpnuMr4s?p=preview

【讨论】：

我做了但无事可做。也许是这个原因：我的 ng-models 是空的？ @Silvinus
在这种情况下，在你的输入之后添加这个：{{summarizationtypeBoth}} - {{summarizationtypeDate}} - {{summarizationtypeObject}} abd check when you first check the value of summarizationtypeBoth change.跨度>
我不明白。你的意思是？ @Silvinus
只需在您的 hml 页面中添加“{{summarizationtypeBoth}} - {{summarizationtypeDate}} - {{summarizationtypeObject}}”。这将显示此范围属性的值。只是检查您的属性是否正确绑定在范围内
当我检查 summarizationtypeBoth 输出：真-真-真。 @Silvinus

【解决方案2】：

尽量避免使用$scope.$watch，因为它可能会减慢您的网络应用程序。

您应该使用具有 3 个值的对象并使用 getter 和 setter 来确保您的条件。这里有一个例子：Conditional ng-model binding in angularjs

使用ng-model-options，您可以强制调用您的设置器：https://docs.angularjs.org/api/ng/directive/ngModelOptions

【讨论】：

我正在学习 angularjs，所以我是新手。所以我不确定代码如何转换。你能举个例子吗@Thibault Friedrich