0

angularJs を使用したフォームがあります。すべてのコードは、質問の最後にあるプランカーで利用できます。

私のコントローラーの中に私が持っている

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

私のフォームと電話フィールドと電子メールフィールドで使用しています：

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

コントローラー内で設計されているため、ユーザーが選択オプションから選択した場合、これらの値は true である必要があります。

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 の値は、ユーザーの選択に基づいて空の文字列から "Tel"、"Email"、または "Tel & Email" に変更され、開発目的でのみ追加の div 内に表示されます。それらはユーザーの選択によって変わります。

$scope.feedback.myChannel の値は、私が開発のために作成している表示 div に従って変化しますが、すべての if ステートメントは機能しません。それはなぜですか？

あなたは私のプランカーで私のコードを見ることができます ここに私のプランカーがあります

これがページのスクリーンショットです スクリーンショット

4

2 に答える 2

1

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

変更を検出するには、次のようにディレクティブ<select>を使用する必要があります。ngChange

意見：

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

次に、データを操作するために使用しようとしている変数 ( showTelField, showEmailField) は、単純にディレクティブに置き換えることができます。つまり ngSwitch、次のようなものにすることができます。

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

また、良い習慣として、あなたの一部のngIf代わりにディレクティブを使用することをお勧めします。ngShowcode

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

于 2016-07-20T22:51:22.527 に答える
0

ng-show="feedback.agree"に変更しng-if="feedback.agree"て選択フィールドを作成することにより、 FormControl オブジェクトを信頼することをお勧めし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>

次に、フォームの有効性の状態に基づいて送信ボタンを無効にすることができます (ディレクティブ|| invalidChannelSelectionから削除しました)。ngDisabled

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

作業例: http://plnkr.co/edit/un9BYMa81cqWOCyd4Vdj?p=preview

于 2016-07-20T22:51:07.837 に答える