Angular, логическое значение в поле выбора

Ответ 1

EDIT: Комментарии отметили, что мое оригинальное решение не работает, как утверждают. Я обновил ответ, чтобы отразить правильный ответ, данный другими ниже (я не могу удалить принятый ответ).

Для Angular 1.0.6 рассмотрим этот HTML:

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

И этот JavaScript:

function MyCntrl($scope) {
    $scope.mybool = true;
}

Вот рабочий DEMO для Angular 1.0.6 и здесь работает DEMO для Angular 1.3.14, который немного отличается.

Ответ 2

Просто выполните следующие действия:

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

и определите:

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};

Ответ 3

Почему бы просто не использовать это?

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>

Ответ 4

Я создал образец для вас, пожалуйста, этот вне.

Это то, что вы хотите использовать модель для привязки ui?

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}

Ответ 5

Я бы рекомендовал использовать для этого директиву. Как обычно, я стараюсь держаться подальше от тайм-аутов и других асинхронных операций, предпочитая более авторитетный и прямой контроль.

directives.directive('boolean', function() {
  return {
    priority: '50',
    require: 'ngModel',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.push(function(value) {
        return value == 'true' || value == true;
      });

      ngModel.$formatters.push(function(value) {
        return value && value != 'false' ? 'true' : 'false';
      });
    }
  };
});

Приоритет устанавливается специально для того, чтобы он выполнялся до любых других директив (которые обычно не имеют установленного приоритета и по умолчанию имеют значение 0)

Например, я использую эту директиву (для выбора true/false) с моей директивой selectpicker, которая обертывает мои элементы select в плагине selectpicker bootstrap.

Edit:

Оговорка здесь, о которой я забыл упомянуть, заключается в том, что ваши значения html должны быть строковыми. То, что директива делает, переводит между представлением и моделью, сохраняя значение модели в boolean и ваше представление в формате string:

%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
  %option{ value: 'true' } Listed
  %option{ value: 'false' } Unlisted

Ответ 6

У меня был очень небольшой успех с этой расстраивающей проблемой. Мое решение, хотя и не слишком элегантное, так как это дополнительная строка кода, решало его каждый раз. Это может не работать в каждом приложении.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

Включение его в "настоящую" строку, прежде чем пытаться переподтвердить его на модели, отображаемой на странице, позволило ей правильно выбрать значение.

Ответ 7

Angular выполняет строгую сортировку между привязкой Value к ng-model и значениями в указанных параметрах. Значения, указанные в первоначальном Вопросе, - это строки "false" и "true". Если значение ng-model имеет тип bool и определяется как { "Значение" : false}, то угловое строение === сравнение между строкой и bool никогда не соответствует, поэтому поле выбора пусто.

Реальная проблема: если вы выберете значение, тип, измененный с bool на строку ({ "Значение" : false} → { "Значение" : "false" }), может вызывать ошибки, если отправлено назад.

Лучшее решение для обеих проблем для меня было одним из Thiago Passos в этом посте. (fooobar.com/questions/104769/...)

Ответ 8

Это тоже сработает. Просто заставьте значение быть логическим, поместив выражение angular для значения.

<select class="span9" ng-model="proposal.formalStoryboard">
    <option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false">
           Not Included
    </option>
    <option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true">
            Included
    </option>
</select>

Ответ 9

Я не уверен, какая версия angular стала поддерживаться, но теперь вы можете использовать ng-value для элемента option. Ваши htmls будут работать следующим образом.

<select ng-model="proposal.formalStoryboard">
    <option ng-value="true">Included</option>
    <option ng-value="false">Not Included</option>
</select>

Он также работает на радио и флажках.

Ответ 10

<script type='text/javascript'>
function MyCntrl($scope) {<!--from   ww w . j  a  v a 2s.  c om-->
  $scope.mybool = true;
}

</script>
</head>
<body>
  <div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <p>
    Currently selected: {{ mybool }}
   </p>
 </div>
</div>
</body>
</html>