Установите значение по умолчанию в select, когда ng-model имеет значение null

Я новичок в angular, и я пытаюсь установить состояние по умолчанию, чтобы выбрать, когда моя ng-модель равна нулю. В принципе, я хочу установить его в "None", если модель пуста. Я попробовал код ниже, но он не работает.

<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Ответы

Ответ 1

Попробуйте следующее:

<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Тем не менее, за документы, это, вероятно, неправильное использование ngInit. Правильный способ сделать это - инициализировать вашу модель с помощью нормальных значений в контроллере (или службе, если это произошло).

Ответ 2

H i,

Мои мысли, что лучше всего делать это в приложении, а не в шаблоне.

  if(typeof $scope.item.carType==="undefined") {
     $scope.item.carType="none";
  }

или просто установите значение

$scope.item.carType="none";

прежде чем он будет обновлен тем, что вы используете для установки значения: -

$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();

Ответ 3

Вы можете решить, используя значение в ng-init

<select ng-init="item.carType='none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Ответ 4

Что я предлагаю вам сделать, так это. Сделайте функцию в вашем контроллере и проверьте, назначено ли $scope.item.carType == undefined значение по умолчанию.

$scope.setDefaultValueForCarType = function () {
      if($scope.item.carType == undefined) {
          $scope.item.carType = "none";
      }
}

Это тоже сработает.

<select ng-init="item.carType='none'" ng-model="item.carType">

Ответ 5

Часто бывает, что ваш ng-model="item.carType" не соответствует ни одной из клавиш выбора опции из-за неправильного случая.

Например: item.cartType есть "Manual", но в параметрах у вас есть опция <option value="manual">Manual</option>, в этом случае она не будет работать, и в выводе консоли вы увидите что-то вроде этого: <option value="? string:Manual ?"></option>

Итак, исправьте свою модель данных или ваше значение опции выбора:
<option value="manual">Manual</option>

Ответ 6

То, что вы ищете, это undefined.

Если значение undefined вам нужно значение для перехода в базу данных, когда выбрано "none"?

Если отправка пустого допустима, вы можете рассмотреть следующее:

<select ng-model="item.carType">
    <option value="">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Fiddle

Это позволяет также передать значение и использовать ту же форму для редактирования и новых записей.

Ответ 7

Основываясь на идее Роба Седжвика, в крайнем случае я не использую $scope, поэтому с контроллером в качестве синтаксиса.

loadStates(); //this calls my function for my code

// this is based on what Rob S. is doing with $scope    
if(typeof vm.scriptQuestion.statecode ==="undefined") {
    console.log('in');
    vm.scriptQuestion.statecode = "AA";  // "AA" happens to be the value of the default name for All of my States that is then displaying "ALL" now when before it was blank
}

Вот мой выбор (да, это мусорный способ делать angular), поскольку ng-repeat очень ограничен для выбора)

 <select id="States" ng-model="vm.scriptQuestion.statecode">
     <option ng-repeat="state in vm.states" value="{{state.StateCode}}">{{state.StateName}}</option>
 </select>

Ответ 8

Я внес следующие изменения в ваш код, и теперь он должен работать. Я удалил вторую часть в ng-init="" и установил значение параметра None в undefined.

<select ng-init="item.carType='none'" ng-model="item.carType">
    <option value=undefined>None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>