Угловое значение null для выбора

Я не мог найти элегантный способ для установки значений null с помощью <select> с помощью функции AngularJS.

HTML:

<select ng-model="obj.selected">
  <option value=null>Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

{{obj}}

JS:

$scope.obj ={"selected":null};

Когда страница загружена, выбирается первая опция, которая хороша, а выход - {"selected":null}. Когда этот первый параметр повторно выбирается после переключения на другой, выход становится {"selected":"null"} (с кавычками), чего я не ожидал.

Пример выполнения: http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La

Я знаю, что разметка <option value=null> неверна. Я также пробовал с <option value="">, но он соответствует пустой String, а не null: поэтому первый параметр не выбран, а другой параметр, который исчезает после выбора первого выбора по умолчанию.

Любая идея?

Ответы

Ответ 1

Это должно сработать для вас:

Контроллер:

  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}]
  }

Шаблон:

  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected"
            ng-options="value.id as value.value for value in objects">
            <option value="">Unknown</option>
    </select>

<br/>
     {{obj}}
  </div>

Работая plnkr

Вы должны использовать ng-опции с выбором.

Ответ 2

Вы можете использовать директиву ngOptions на select. Согласно документации:

Необязательно, один элемент с жестким кодом <option> со значением, установленным в пустую строку, может быть вложен в элемент <select>. Затем этот элемент будет представлять параметр null или "не выбран". См. Пример ниже для демонстрации.

<select ng-model="obj.selected" ng-options="key as label for (key, label) in ['No', 'Yes']">
  <option value="">Unknown</option>
</select>

Очевидно, что лучше определить список опций непосредственно в контроллере.

Ответ 3

Попробуйте использовать ng-options вместо ручного создания тегов, как в этом примере, слегка отредактированный из Angular docs:

http://plnkr.co/edit/DVXwlFR6MfcfYPNHScO5?p=preview

Оперативными частями здесь являются строки 17, определяющие объект "цвета", а атрибуты ng-options повторяют эти цвета для создания параметров.

Ответ 4

Если вы действительно хотите использовать null, см. ниже. Вам нужно использовать ng-options и позволить Angular обрабатывать отображение:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color selector</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>

</head>
<body ng-app="">
    <script>
  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objStates = [{key:"Unknown", value:null}, {key:"Yes", value:1}, {key:"No", value:0}]

    $scope.$watch('obj.selected', function(newVal){
      console.log(newVal);
    })
  }
  </script>
  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected" ng-options="state.value as state.key for state in objStates">
    </select>

<br/>
     {{obj}}
  </div>
</body>
</html>

Ответ 5

Я столкнулся с той же проблемой, но не смог ее решить с помощью "ng-options". Мое решение:

module.directive('modelToNull', [function () {
    return {
        scope: {
            check: "&modelToNull"
        },
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (value) {
                return value == null || $scope.check({value: value}) ? null : value;
            });
        }
    };
}]);

Вы можете использовать его следующим образом:

<select ng-model="obj.selected" model-to-null="value == 'null'">
  <option value="null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

Ответ 6

Можно ли использовать parseInt значение? Например, как "1", так и "0" будут равны их соответствующим целочисленным значениям. Если вы запускаете пустую строку через parseInt, вы можете легко получить NaN.

> parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1

Ответ 7

Это намного проще в Angular2/Angular, где вы можете просто использовать

<option [value]="null">Unknown</option>

Это значение больше не является строкой, а действительным нулевым значением.

Ответ 8

единственный способ, которым вы можете достичь, - это использовать событие onchange и восстановить объект, как инициализированный любой другой попыткой установить выбранное значение null, удалит свойство из объекта.

$scope.setValue=function(val){
  if($scope.obj.selected=="null")
     $scope.obj ={"selected":null};
}

<select ng-change="setValue()" ng-model="obj.selected">
  <option value=null ng-click="obj.selected=null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

Это плохая идея, вы всегда должны иметь значения в своей модели вместо того, чтобы играть с нулевым значением и undefined