Question

每当我使用ng-model时，它为我的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>

AngularJS ng-model在select标签中给出空白选项

3 个答案: