选择框中的角度、布尔值

Question

我想使用选择将布尔值设置为 true 或 false 这里是我的代码：

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

值 (proposal.formalStoryboard) 被正确设置为 true 或 false ，但当该值已分配时，更改不会反映在选择框中。

我尝试了 ng-value="true" 和 ng-value="false" 而不仅仅是 value，但它不起作用。

Answer 1

编辑：评论者指出，我原来的解决方案没有像声称的那样工作。 我已更新答案以反映以下其他人给出的正确答案（我无法删除已接受的答案）。

对于 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的角度1.0.6，这里是一个工作DEMO的角度1.3.14，这是稍有不同。

Answer 2

只是这样做：

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

并定义：

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

Answer 3

为什么不直接使用这个？

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

Answer 4

如果您使用的是 angularjs 版本>= 1.2.0您将可以访问指令ng-value

您可以在选项元素上使用ng-value 。 你的 html 会像这样工作。

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

它也适用于收音机和复选框。

Answer 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 ）

例如，我将此指令（用于真/假选择）与我的selectpicker指令一起使用，该指令将我的select元素包装在selectpicker引导插件中。

编辑：

这里需要注意的是，我忘了提及，您的 html 值必须是字符串值。 该指令所做的是在视图和模型之间进行转换，将模型值保持为boolean ，将视图保持为string格式：

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

Answer 6

这也会起作用。 只需通过为该值放置一个角度表达式来强制该值成为布尔值。

<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>

Answer 7

我创建的样本给你，请检查该出来。

是你想用model来驱动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);
    }
}

Answer 8

我在这个令人沮丧的问题上几乎没有成功。 我的解决方案虽然不太优雅，因为它是额外的一行代码，但每次都解决了。 这可能不适用于每个应用程序。

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

在尝试将其重新绑定到页面上显示的模型之前将其转换为“真实”字符串，可以使其正确选择值。

Answer 9

Angular 在绑定到 ng-model 的值和给定选项中的值之间进行了严格的比较。 初始问题中给出的值是字符串“false”和“true”。 如果 ng-model 的值是类型 bool 并且定义为 {"Value":false} ，则字符串和 bool 之间的 Angulars 严格 === 比较永远不会匹配，因此选择框为空。

真正的问题是 - 如果您选择一个值，则类型从 bool 更改为字符串 ({"Value":false} --> {"Value":"false"}) 如果回发可能会导致错误。

对我来说，这两个问题的最佳解决方案是这篇文章中的 Thiago Passos 之一。 ( https://stackoverflow.com/a/31636437/6319374 )

Answer 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>

选择框中的角度、布尔值

问题描述

10 个解决方案

解决方案1
88 已采纳 2013-07-19 19:52:52

解决方案2
59 2013-08-08 14:40:47

解决方案3
34 2015-07-26 11:27:54

解决方案4
12 2017-12-21 22:14:59

解决方案5
2 2015-10-29 04:43:32

解决方案6
2 2017-08-18 20:03:29

解决方案7
1 2013-07-19 19:56:34

解决方案8
0 2015-02-09 01:02:47

解决方案9
0 2016-05-11 13:09:04

解决方案10
-3 2015-04-28 04:47:19

选择框中的角度、布尔值

问题描述

10 个解决方案

解决方案1 88 已采纳 2013-07-19 19:52:52

解决方案2 59 2013-08-08 14:40:47

解决方案3 34 2015-07-26 11:27:54

解决方案4 12 2017-12-21 22:14:59

解决方案5 2 2015-10-29 04:43:32

解决方案6 2 2017-08-18 20:03:29

解决方案7 1 2013-07-19 19:56:34

解决方案8 0 2015-02-09 01:02:47

解决方案9 0 2016-05-11 13:09:04

解决方案10 -3 2015-04-28 04:47:19

解决方案1
88 已采纳 2013-07-19 19:52:52

解决方案2
59 2013-08-08 14:40:47

解决方案3
34 2015-07-26 11:27:54

解决方案4
12 2017-12-21 22:14:59

解决方案5
2 2015-10-29 04:43:32

解决方案6
2 2017-08-18 20:03:29

解决方案7
1 2013-07-19 19:56:34

解决方案8
0 2015-02-09 01:02:47

解决方案9
0 2016-05-11 13:09:04

解决方案10
-3 2015-04-28 04:47:19