Невозможно получить значение из HTML в контроллер

Question

Здесь я отправляю данные почтового идентификатора и его видимости на сервер для двух разных пользователей, для одного я включил почту и ее видимость, а для другого скрывающую видимость.

Чтобы скрыть видимость, я использую <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 API API .