AngularJS NG模型在SELECT标签中给出了空白选项

Question

每当我使用ng模型时，它为我的 select标签提供空白选项。

所以这是我的html：

    <label> Select Email Template</label>
    <select ng-change="vm.previewMessage(this)" ng-model="vm.emailSelectedMessage" class="form-control">
        <option ng-repeat="message in vm.messages" ng-if="message.type === 1" ng-disabled="vm.isProcessing" ng-value="message.id">
            {{ message.name }}
        </option>
    </select>
    <label> Select SMS Template</label>
    <select ng-change="vm.previewMessage(this)" ng-model="vm.smsSelectedMessage" class="form-control">
        <option ng-repeat="message in vm.messages" ng-if="message.type === 2" ng-disabled="vm.isProcessing" ng-value="message.id">
            {{ message.name }}
        </option>
    </select>

这是我的JS：

vm.emailSelectedMessage = 0;
vm.smsSelectedMessage = 0;
function loadMessages() {
          Messages
              .query()
              .$promise
              .then(function(result) {
                  vm.messages = result;
              }, function(error) {
                  console.error(error);
              });
      }

Answer 1

vm.selectMessage = function(msgType) {
  var msgId = null;
  vm.messages.forEach(msg, function(value) {
    if(msg.type == msgType) {
      msgId = msg.id;
      return;
    }
  });
  return msgId;
}

在LoadMessages((之前，请在上面提到的控制器中写一个功能。然后更改您的选择标签，如下所述。

<label> Select Email Template</label>
<select ng-change="vm.previewMessage(this)" ng-model="vm.emailSelectedMessage" ng-init="vm.emailSelectedMessage = vm.selectMessage(1)" class="form-control">
    <option ng-repeat="message in vm.messages" ng-if="message.type === 1" ng-disabled="vm.isProcessing" ng-value="message.id">
        {{ message.name }}
    </option>
</select>
<label> Select SMS Template</label>
<select ng-change="vm.previewMessage(this)" ng-model="vm.smsSelectedMessage" ng-init="vm.smsSelectedMessage = vm.selectMessage(2)" class="form-control">
    <option ng-repeat="message in vm.messages" ng-if="message.type === 2" ng-disabled="vm.isProcessing" ng-value="message.id">
        {{ message.name }}
    </option>
</select>

尝试上述代码。可能会有所帮助！

Answer 2

我通过修改我的loadMessages((函数来设法以动态方式解决它。

function loadMessages() {
        Messages
            .query()
            .$promise
            .then(function(result) {
                _.each(result, function (r, i) {
                  if (vm.emailSelectedMessage === 0) {
                    if (result[i].type === 1) {
                      vm.emailSelectedMessage = result[i].id;
                    }
                  }
                  if (vm.smsSelectedMessage === 0) {
                      if (result[i].type === 2) {
                          vm.smsSelectedMessage = result[i].id;
                      }
                  }
                });
                vm.messages = result;
            }, function(error) {
                console.error(error);
            });
    }

Answer 3

我们不能在标签中使用两种方式绑定，而不是使用此方法。它打印下拉值。

<label> Select Email Template</label>
    <select ng-change="vm.previewMessage(this)" ng-model="vm.emailSelectedMessage" class="form-control">
      <option ng-repeat="message in vm.messages" ng-if="message.type === 1" ng-disabled="vm.isProcessing" value="{{ message.name }}">
      </option>
    </select>
    <label> Select SMS Template</label>
    <select ng-change="vm.previewMessage(this)" ng-model="vm.smsSelectedMessage" class="form-control">
      <option ng-repeat="message in vm.messages" ng-if="message.type === 2" ng-disabled="vm.isProcessing" value="{{ message.name }}">
      </option>
    </select>