选择框中的Angular,boolean值

问题描述 投票:63回答:10

我想使用select将boolean值设置为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”而不仅仅是值,但它不能正常工作。

javascript angularjs boolean
10个回答
78
投票

编辑:评论家指出,我原来的解决方案并没有像声称的那样工作。我已经更新了答案,以反映下面其他人给出的正确答案(我无法删除已接受的答案)。

对于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;
}

这是一个适用于Angular 1.0.6的DEMO,这是一个适用于Angular 1.3.14的DEMO,略有不同。


-3
投票
<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>

58
投票

就这样做:

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

并定义:

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

32
投票

为什么不用这个呢?

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

3
投票

我不确定支持哪种版本的角度,但你现在可以在选项元素上使用ng-value。你的htmls会像这样工作。

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

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


1
投票

我为你创建了样品,请检查this

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

1
投票

我建议使用一个指令。像往常一样,我试图远离超时和其他异步操作,而不是更权威和直接的控制。

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

1
投票

这也会奏效。只需在值中加入一个角度表达式,就可以强制该值为boolean。

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

0
投票

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

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

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


0
投票

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

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

对我来说这两个问题的最佳解决方案是本帖子中的Thiago Passos。 (https://stackoverflow.com/a/31636437/6319374

© www.soinside.com 2019 - 2024. All rights reserved.