私は自分のコントローラ内で$ scope.feedback.myChannelを使用することができません。私はhtmlページで使用できますか？

Question

私はangularJsを使用したフォームを使用しています。すべてのコードは、質問の最後に私のプランナーから入手できます。私のコントローラ内部の

私は自分のフォームで

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

を持っていると電話フィールドおよび電子メールフィールドi`mのための使用：

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

ユーザーからそれを選択した場合、これらの値が真でなければなりませんコントローラ内で設計されたオプションを選択します。 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> 

：

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

$ scope.feedback.myChannelの値が空の文字列から変更

に "電話番号"、 "電子メール" または「電話番号&メール"私はユーザーの選択に基づいて、私は彼らがユーザーの選択を変更することを確認する開発目的のためだけに余分なdivの中に表示しています。

しかし、$ scope.feedback.myChannelの値は、表示するdivに従って変更されていますが、開発するために作成していますが、すべてのif文は機能しません。 それは何故ですか？

あなたは Here is my plunker

、ここでは、ページ

Answer 1

まず、あなたのコントローラを持っているifsは、ときにのみページに呼び出されますロード後、angularはそれを無視します$scopeのfunctionの内部にロジックを入れない限り。

ビュー：

<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); 
} 

次に、これらの変数、このようなあなたの<select>あなたがngChangeディレクティブを使用する必要があるの変化を検出するために

データを操作するために使用しようとしています（

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

また、私はあなたのいくつかの部分に代わりngShowのngIfディレクティブを使用することができことをお勧めしたい：showTelField、showEmailField）は、単にあなたがこのような何かを持つことができるので、ngSwitchすなわちディレクティブ、に置き換えることができますcodeを推奨します。

フォークされたDEMOを見てください。

Answer 2

それはng-if="feedback.agree"にng-show="feedback.agree"を変更し、選択を行うことによって、FormControlオブジェクトを信頼する方が良いでしょうのスクリーンショットである私のplunkerに私のコードを見ることができますフィールドrequired：

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

次に、送信ボタンbを無効にすることができます

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

の作業例：（私はngDisabledディレクティブから|| invalidChannelSelectionを削除）、フォームの妥当性状態にASED http://plnkr.co/edit/un9BYMa81cqWOCyd4Vdj?p=preview