Question

我想这样：

应立即检查/取消选中日期时间和对象的行，也可以单独检查/取消。我的显示如照片：

我使用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所以如何写？请。

Answer 1

使用更改属性：

<td onselectstart='javascript:{return false;}' id="ToolbarControl1xSaveToolBar_Item_1"
onmouseover='javascript:igtbar_mouseOver(this,event,true);' onmousedown='javascript:igtbar_mouseDown(this,event,true,false);'
onmouseup='javascript:igtbar_mouseUp(this,event,true);' onmouseout='javascript:igtbar_mouseOut(this,event,true,false);'
class="button_bar_default" title="Save & Exit">
<img style='margin: 0;' igimg='1' src='/Erp/Images/save_exit.gif' align='Left' id='ToolbarControl1xSaveToolBar_Item_1_img' />
<span igtxt='1'>Save & Exit</span>

并在您的控制器中

<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

请参阅此plunker Why does application of `sequence` on List of Lists lead to computation of its Cartesian Product?

Answer 2

尽量避免$scope.$watch，因为它可能会降低您的网络应用程序的速度。

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

使用ng-model-options，您可以强制呼叫您的二传手：https://docs.angularjs.org/api/ng/directive/ngModelOptions

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

2 个答案: