javascript - 无法从 html 获取值到 Controller

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>

并设置 Controller 的可见性:

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

AngularJS 是 MVC - Model-View-Controller框架。框架从模型渲染 View 。 Controller 创建模型。使用 ng-init 创建模型是错误的方式。它使得应用程序难以理解、测试、调试和维护。

ng-init 指令可能被滥用，在模板中添加不必要的逻辑。 ngInit 只有少数合适的用途。请参阅AngularJS ng-init Directive API Reference .