如果我可以在我的 html 页面中使用 $scope.feedback.myChannel，为什么我不能在我的控制器中使用它？

Question

我有一个使用 angularJs 的表格，所有代码都可以在问题末尾的 plunker 上找到。

我的控制器里面有

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

在我的表格中以及我使用的电话字段和电子邮件字段中：

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

如果用户从 select 选项中 select 这些值应该为真，因为它是在控制器内部设计的。

在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 仅用于开发目的，以确保它们根据用户的 selection.

改变

但是所有 if 语句都不起作用，尽管 $scope.feedback.myChannel 的值会根据我为开发所做的 div 显示而变化。知道这是为什么吗？

你可以在我的plunker中看到我的代码 Here is my plunker

这是页面的截图

Answer 1

最好信任 FormControl 对象，方法是将 ng-show="feedback.agree" 更改为 ng-if="feedback.agree" 并使 select 字段 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>

然后您可以根据表单的有效性状态禁用提交按钮（我从 ngDisabled 指令中删除了 || invalidChannelSelection）：

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

工作示例：http://plnkr.co/edit/un9BYMa81cqWOCyd4Vdj?p=preview

Answer 2

首先，控制器中的 ifs 只会在页面加载时调用，之后 angular 将忽略它除非你把你的$scope.

上的 function 中的逻辑

要检测 <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>

此外，我建议您在 code 的某些部分使用 ngIf 指令而不是 ngShow 作为一个好习惯。

看看分叉的DEMO。

如果我可以在我的 html 页面中使用 $scope.feedback.myChannel，为什么我不能在我的控制器中使用它？

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

angularjs

angularjs-forms