Warum kann ich $ scope.feedback.myChannel nicht in meinem Controller verwenden, wenn ich ihn in meiner HTML-Seite verwenden kann?

Question

Ich habe ein Formular mit angularJs, alle Code ist auf meinem Plunker am Ende der Frage verfügbar.

in meinem Controller ich habe

$scope.showTelfield= false; $scope.showEmailfield= false; 

in meiner Form und für Telefonfeld und E-Mail-Feld i`m mit:

ng-show="showTelField" ng-show="showEmailField" 

diese Werte wahr sein sollten, wenn der Benutzer sich von der Auswahl Wählen Sie die Optionen aus, wie sie im Controller vorgesehen sind.

in html

<select class="form-control c-select" name="select" ng-model="feedback.myChannel" ng-options="channel.value as channel.label for channel in channels"> 
<option value="">Select a method</option> 
</select> 

in Controller:

$scope.feedback = { 
    myChannel: "", 
    firstName: '', 
    lastName: '', 
    agree: false, 
    email: '' 
}; 
$scope.channels = [{ 
    value: "Tel", 
    label: "Tel" 
}, { 
    value: "Email", 
    label: "Email" 
}, { 
    value: "Tel & Email", 
    label: "Tel & Email" 
}]; 


//Telling browser to view telephone or Email feild if needed.. 
    if($scope.feedback.myChannel === "Tel" || $scope.feedback.myChannel === "Tel & Email"){ 
     $scope.showTelField = true } 

    if($scope.feedback.myChannel === "Email" || $scope.feedback.myChannel === "Tel & Email"){ 
     $scope.showEmailField = true } 

der Wert von $ scope.feedback.myChannel von einer leeren Zeichenfolge ändert sich auf "Tel", "E-Mail" oder „Tel & Email "basierend auf der benutzerauswahl und ich zeige das innerhalb einer extra div nur für entwicklungszwecke, um sicherzustellen, dass sie sich bei der benutzerauswahl ändern.

aber alle if-Anweisungen funktionieren nicht, obwohl sich der Wert von $ scope.feedback.myChannel entsprechend dem angezeigten div ändert, den ich für die Entwicklung mache. irgendeine idee warum ist das?

Sie können meinen Code in meinem Plunker Here is my plunker

und hier ist ein Screenshot der der Seite

Answer 1

Zuerst wird die ifs, die Sie in Ihrem Controller haben nur dann, wenn Seite aufgerufen werden Lasten, danach angular ignoriert es , wenn Sie Ihre Logik in eine function auf der $scope setzen.

Um eine Änderung in Ihrem <select> erkennen Sie ngChange Richtlinie, wie diese verwendet werden soll:

Ausblick:

<select ng-change="change()" class="form-control c-select" name="select" ng-model="feedback.myChannel" ng-options="channel.value as channel.label for channel in channels"> 

JS:

$scope.change = function() { 
    console.log($scope.feedback.myChannel); 
} 

dann diejenigen Variablen, die Sie versuchen, Ihre Daten zu manipulieren (showTelField, showEmailField) kann einfach durch eine Richtlinie, dhngSwitch ersetzt werden, so dass Sie etwas davon haben können:

<div ng-switch="feedback.myChannel"> 
    <div class="form-group " ng-class="{'has-error': !feedbackForm.telnum.$pristine && feedback.tel.number == '' || feedback.tel.areacode == ''}" ng-switch-when="Tel"> 
    ... 
    </div> 
    <div class="form-group has-feedback" ng-class="{'has-error': !feedbackForm.email.$pristine && feedback.email == '' || feedbackForm.email.$invalid }" ng-switch-when="Email"> 
    ... 
    </div> 
    <div ng-switch-when="Tel & Email"> 
    ... 
    </div> 
</div> 

Auch ich Sie ngIf Direktive statt ngShow in einigen Teilen zu verwenden, würde vorschlagen, Ihre code als eine gute Praxis.

Werfen Sie einen Blick auf die gegabelten DEMO.

Answer 2

Es ist besser sehen die Formcontrol-Objekt zu vertrauen, von ng-show="feedback.agree" zu ng-if="feedback.agree" ändern und machen die Auswahl required Feld:

<div class="col-sm-3 col-sm-offset-1" ng-if="feedback.agree"> 
    <select class="form-control c-select" name="select" ng-model="feedback.myChannel" ng-options="channel.value as channel.label for channel in channels" required> 
     <option value="">Select a method</option> 
    </select> 
    <span class="help-block" ng-show="invalidChannelSelection && feedback.myChannel == ''">Select a method</span> 
</div> 

Und dann können Sie die Submit-Button b deaktivieren asierend über die Gültigkeit Zustand der Form (Ich entfernte die || invalidChannelSelection aus der ngDisabled Richtlinie):

<button type="submit" class="btn btn-primary" name="submit" ng-disabled="feedbackForm.$invalid">Send Feedback</button> 

Arbeitsbeispiel: http://plnkr.co/edit/un9BYMa81cqWOCyd4Vdj?p=preview