[英]How to use ng-model with checkbox value?
我想這個:
應立即和單獨檢查/取消選中日期時間和對象的摘要行。 我的顯示像照片:
我用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所以如何寫? 請。
我們改變財產:
<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
}
查看此plunker https://plnkr.co/edit/ztL4nC6JYDv1lpnuMr4s?p=preview
盡量避免$scope.$watch
盡可能多,因為它可能會減慢你的web應用程序。
您應該使用具有3個值的對象並使用getter和setter來確保您的條件。 這里有一個例子: angularjs中的條件ng模型綁定
使用ng-model-options
,您可以強制調用您的setter: https : //docs.angularjs.org/api/ng/directive/ngModelOptions
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.