shireef khatab shireef khatab - 4 months ago 9
AngularJS Question

Why can`t i use $scope.feedback.myChannel inside my controller if i can use it in my html page?

I have a form using angularJs, all code is available on my plunker at the end of the question.

inside my controller i have

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


in my form and for telephone field and email field i`m using:

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


these values should be true if the user select it from the select options as it is designed inside the controller.

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 }


the value of $scope.feedback.myChannel changes from an empty string to "Tel", "Email" or "Tel & Email" based on the user choice and i'm showing that inside an extra div only for developing purpose to make sure they change on user's selection.

but all the if statements don't work although the value of $scope.feedback.myChannel changes according to the displaying div i'm making for development.
any idea why is that?

you can see my code in my plunker
Here is my plunker

and here is a screenshot of the the page
screenshot

Answer

Well, your tests are completely wrong, there's no way to showTelField and showEmailField be true, since you aren't setting them to true.

Then I'd recommend you to erase those variables and to simply use ngSwitch directive, then you can have something like this:

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

Take a look on the forked DEMO.

Also I'd suggest you to use ngIf directive instead of ngShow as a good practice.

EDIT:

Note that the ifs that you're trying to use in your controller will only be called when page loads, after it, angular ignores it.

To detect a change in your <select> you should use ngChange directive, like this:

View:

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

JS:

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