Question

在这里，我正在向两个不同的用户发送邮件ID及其可见性的数据到服务器，因为其中一个包含了邮件及其可见性，另一个包含隐藏的可见性。

要隐藏可见性，我正在使用<div ng-if="atom.type === 'person'">。隐藏和显示正常工作，但两种情况都存在问题它显示的可见性未定义。

如果我不使用<div ng-if="atom.type === 'person'">。那么它可以正确发送可见性。

如何解决这个问题？

我的代码是空的

var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('profileInfo', function($scope, $http) {
  $scope.authorized = false;
  $scope.visibility = ["Private", "Friends", "Public"];
  $scope.id = 0;
  $atom.type = 'person';
  $scope.addMailId = function(data) {
    console.log(data);
    $scope.mailidDetaillD = {
      'mailidDetaillList[0].email': data.mailid,
      'mailidDetaillList[0].visibility': data.visibility,
      'pageId': $scope.id,
    };
    console.log($scope.mailidDetaillD);
  }
});

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>

<dd class="col-sm-7 col-md-7 col-lg-7">
  <div class="pull-right" ng-if="authorized">
    <a ng-click="showAddMailIdDiv()" ng-model="addMailIdLink">add MailId Details</a>
    <div class="add-school" ng-show="showAddMailId">
      <form action="AddMailId" id="AddMailId" name="addmail" cssClass="form-horizontal">
        <div class="form-group">
          <div class="col-lg-2">
            <label>Mail Id</label>
          </div>
          <div class="col-lg-6">
            <input type="text" ng-model="mail.mailid" name="mailid" placeholder="Enter mail id" required class="form-control" />
            <div ng-messages="addmail.mailid.$error" ng-if="addmail.mailid.$touched">
              <p class="field-err" ng-message="required">MailId Required</p>
            </div>
          </div>
        </div>
        <div ng-if="atom.type === 'person'">
          <div class="form-group">
            <div class="col-lg-2">
              <label>Visibility</label>
            </div>
            <div class="col-lg-6">
              <select ng-model="mail.visibility"
                      ng-init=" mail.visibility = visibility[1]"
                      ng-options="x for x in visibility"
                      class="form-control"
                      name="mailvisibility" required>
              </select>
              <div ng-messages="addmail.mailvisibility.$error" ng-if="addmail.mailvisibility.$touched">
                <p class="field-err" ng-message="required">Select Mail visibility</p>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-lg-2">
            <label class="sr-only">Submit</label>
          </div>
          <div class="col-lg-6 pull-right">
            <input type="button" value="add" ng-click="addMailId(mail)" ng-disabled="addmail.$invalid" cssClass="btn btn-sm btn-primary" />
            <input type="button" ng-click="hideAddMailIdDiv()" value="cancle" class="btn btn-sm btn-secondary" />
          </div>
        </div>

      </form>
    </div>
  </div>
</dd>

最后一个console.log显示以下结果

  mailidDetaillList[0].email: "W@w.com"
  mailidDetaillList[0].visibility: undefined
  pageId: 2337

在删除<div ng-if="atom.type === 'person'">

之后

  mailidDetaillList[0].email: "ss@s.com"
  mailidDetaillList[0].visibility: "Public"
  pageId: 2337

Answer 1

删除ng-init：

  <select ng-model="mail.visibility"
          ̶n̶g̶-̶i̶n̶i̶t̶=̶"̶ ̶m̶a̶i̶l̶.̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶ ̶=̶ ̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶[̶1̶]̶"̶
          ng-options="x for x in visibility"
          class="form-control"
          name="mailvisibility" required>
  </select>

并从控制器设置可见性：

  $scope.mail = { visibility: $scope.visibility[1] };

AngularJS是一个MVC - Model-View-Controller框架。框架从模型渲染视图。控制器创建模型。使用ng-init创建模型的方法是错误的。它使应用程序难以理解，测试，调试和维护。

可以滥用ng-init指令在模板中添加不必要的逻辑量。 ngInit只有几种适当的用法。参见AngularJS ng-init Directive API Reference。

无法从HTML获取值到控制器

1 个答案: