2016-05-13 4 views
3

Ich möchte das:Wie benutzt man ng-Modell mit Checkbox-Wert?

Zusammenfassung Zeile sollte für Datetime und Objekt auf einmal sowie separat aktiviert/deaktiviert sein. meine Anzeige wie Foto: enter image description here

Ich benutze ng-Modell. mein Checkbox Code wie folgt zusammen:

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

und dieses ng-Modell (js) Code:

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

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

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

       }); 

wie kann ich ng-Modell verwenden, so Wie schreibe ich? Bitte.

+0

Put-ng-Änderung auf Zusammenfassung Eingang und stellen Sie die beiden anderen. – YOU

+0

Wenn ich Ihr Problem verstanden habe, überprüfen Sie diese Plotter https://plnrkr.co/edit/wYmWXnu5Ld2SmUdGayfd?p=preview – santhosh

+0

Ich denke, das hilft mir aber Wie kann ich tun: Legen Sie ng-Änderung auf Zusammenfassung Eingabe und setzen Sie die anderen zwei Der Weg Danke für Ihre Antwort @YOU – eagle

Antwort

1

uns ng Wechsel Eigenschaft:

<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 

und in Ihrem Controller https://plnkr.co/edit/ztL4nC6JYDv1lpnuMr4s?p=preview

+0

Ich habe aber nichts zu tun. vielleicht diese Ursache: Meine ng-Modelle sind leer? @Silvinus – eagle

+0

In diesem Fall fügen Sie dies nach Ihrer Eingabe hinzu: {{summarizationtypeBoth}} - {{sumarizationtypeDate}} - {{sumarizationtypeObject}} und überprüfen, wenn Sie zuerst den Wert von summarizationtypeBoth ändern. – Silvinus

+0

Ich verstehe nicht. Was meinen Sie ? @Silvinus – eagle

1

Versuchen Sie, diese Plunker

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

Siehe $scope.$watch so weit wie möglich zu vermeiden, weil es Ihre Web verlangsamen Anwendung.

Sie sollten ein Objekt mit den 3 Werten verwenden und Getter und Setter verwenden, um Ihre Bedingungen zu gewährleisten. Es gibt ein exemple hier: Conditional ng-model binding in angularjs

Mit ng-model-options können Sie zwingen, Ihre Setter zu nennen: https://docs.angularjs.org/api/ng/directive/ngModelOptions

+0

Ich arbeite gerade eckigjs, also bin ich neu dieses Zeug. Ich bin mir also nicht sicher, wie der Code wirken könnte. Kannst du Beispiele @Thibault Friedrich aussprechen? – eagle