Почему я не могу использовать $ scope.feedback.myChannel внутри моего контроллера, если я могу использовать его на своей html-странице?

0

У меня есть форма, использующая angularJs, весь код доступен на моем плункере в конце вопроса.

внутри моего контроллера у меня есть

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

в моей форме и для поля телефона и электронной почты я использую:

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 изменяется от пустой строки до "Tel", "Email" или "Tel & Email" в зависимости от выбора пользователя, и я показываю, что внутри дополнительного div только для разработки, чтобы убедиться они меняются при выборе пользователя.

но все операторы if не работают, хотя значение $ scope.feedback.myChannel изменяется в соответствии с отображением div, которое я делаю для разработки. любая идея, почему?

вы можете увидеть мой код в моем плунжере. Вот мой плункер

и вот скриншот страницы Изображение 174551

Теги:
angularjs-forms

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 вместо ngShow в некоторых частях вашего code в качестве хорошей практики.

Взгляните на раздвоенную ДЕМО.

Поделиться
  • 0
    Спасибо .. пожалуйста, знайте, что: ng-show = "feedback.agree && (feedback.myChannel == 'Tel' || feedback.myChannel == 'Tel & Email')"> также работает! Y? Я могу достичь желаемого результата с помощью нескольких решений, но мой вопрос заключается в том, как я могу использовать feedback.myChannel в html и не могу использовать его как $ scope.feedback.myChannel в контроллере? и когда вы говорите: нет никакого способа, чтобы showTelField и showEmailField были истинными, поскольку вы не устанавливаете их в значение true ... но когда вы выбираете опцию или устанавливаете значение feedback.myChannel ... пожалуйста, перейдите к ur plunker и используйте ng- показать, как указано выше.
  • 0
    и без всего этого, посмотрите на это отображение div с правой стороны, это показывает, что feedback.myChannel принимает значение при выборе ... и это то, что говорят операторы if if .. измените showTelField и showEmailField на true, если feedback.myChannel принимает значение , !!!
Показать ещё 7 комментариев
0

Это лучше доверить объект FormControl, изменяя ng-show="feedback.agree" в ng-if="feedback.agree" и делает выберите поле 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

Поделиться
  • 0
    спасибо, я посмотрел на твоего плункера, и он не показывает эти поля при выборе опции.
  • 0
    и я предполагаю, что не могу сделать выбор обязательным в случае, если пользователь не хочет, чтобы с ним связывались, поэтому форма всегда будет недействительной .. true !! пожалуйста, прочитайте мой комментарий @ developer33 ниже .. как я объясняю больше о моем вопросе.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню