0

我有一个使用 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 中看到我的代码 这是我的 plunker

这是页面的截图 截屏

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指令而不是ngShow在您的某些部分code作为一种良好做法。

看看分叉的DEMO。

于 2016-07-20T22:51:22.527 回答
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

于 2016-07-20T22:51:07.837 回答