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

Question

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

在我的控制器里面我有

$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 发生变化。 知道为什么吗？

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

这是页面的截图

Answer 1

首先，您在控制器中拥有的ifs 只会在页面加载时被调用，之后angular 会忽略它除非您将您的逻辑放在@ 上的function 中987654328@.

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

Answer 2

最好信任 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>

然后您可以根据表单的有效性状态禁用提交按钮（我从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