blocks|key|3008219|text|编辑：评论员指出，我最初的解决方案并没有像声称的那样工作。我已更新答案以反映下面其他人给出的正确答案(我无法删除已接受的答案)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3008220|对于Angular+1.0.6，考虑以下HTML：|3008221|<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>|code-block|syntax|javascript|3008222|和这个JavaScript：|3008223|function+MyCntrl($scope)+{
++++$scope.mybool+=+true;
}|3008224|这是一个适用于Angular+1.0.6的工作DEMO，这是一个适用于Angular+1.3.14的工作DEMO，两者略有不同。|3008225|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jGfL5/112/|1|http://jsfiddle.net/ChrisP/moojmocp/1/^0|0|3|0|0|0|0|0|N|4|0|1G|4|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

<p><strong>EDIT:</strong> Commentors have pointed out that my original solution did not work as claimed. I have updated the answer to reflect the correct answer given by others below (I cannot delete an accepted answer).</p>

<p>For Angular 1.0.6, consider this HTML:</p>

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

<p>And this JavaScript:</p>

<pre><code>function MyCntrl($scope) {
    $scope.mybool = true;
}
</code></pre>

<p>Here is a working <a href="http://jsfiddle.net/jGfL5/112/">DEMO</a> for Angular 1.0.6 and here is a working <a href="http://jsfiddle.net/ChrisP/moojmocp/1/">DEMO</a> for Angular 1.3.14, which is slightly different.</p>


blocks|key|2795712|text|只需这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795713|<select+ng-model="someModel"+ng-options="boolToStr(item)+for+item+in+[true,+false]">
</select>|code-block|syntax|javascript|2795714|并定义：|2795715|$scope.boolToStr+=+function(arg)+{return+arg+?+'Included'+:+'Not+included'};|2795716|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just do like this:</p>

<pre><code>&lt;select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]"&gt;
&lt;/select&gt;
</code></pre>

<p>and define:</p>

<pre><code>$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
</code></pre>


blocks|key|3008312|text|为什么不直接用这个呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3008313|<select+class="form-control"+ng-options="(item?'Included':'Not+Included')+for+item+in+[true,+false]"></select>|code-block|syntax|javascript|3008314|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why not just use this?</p>

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


blocks|key|3008423|text|如果您使用的是angularjs版本>=+1.2.0，则可以访问ng-value指令|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3008424|您可以在选项元素上使用ng-value。你的htmls是这样工作的。|3008425|<select+ng-model="proposal.formalStoryboard">
++++<option+ng-value="true">Included</option>
++++<option+ng-value="false">Not+Included</option>
</select>|code-block|syntax|javascript|3008426|它也适用于无线电和复选框。|3008427|entityMap|0|LINK|mutability|MUTABLE|url|https://code.angularjs.org/1.2.0/docs/api/ng.directive:ngValue^0|I|8|W|8|W|8|0|0|B|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>If you are using angularjs version <code>&gt;= 1.2.0</code> you will have access to the directive <a href="https://code.angularjs.org/1.2.0/docs/api/ng.directive:ngValue" rel="nofollow noreferrer"><code>ng-value</code></a></p>

<p>You can use the <code>ng-value</code> on an option element. Your htmls would work like this.</p>

<pre><code>&lt;select ng-model="proposal.formalStoryboard"&gt;
    &lt;option ng-value="true"&gt;Included&lt;/option&gt;
    &lt;option ng-value="false"&gt;Not Included&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>It also works on radio and checkboxes. </p>


blocks|key|2795770|text|为此，我建议使用指令。像往常一样，我尽量避免超时和其他异步操作，而不是更权威和直接的控制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795771|directives.directive('boolean',+function()+{
++return+{
++++priority:+'50',
++++require:+'ngModel',
++++link:+function(_,+__,+___,+ngModel)+{
++++++ngModel.$parsers.push(function(value)+{
++++++++return+value+==+'true'+%7C%7C+value+==+true;
++++++});

++++++ngModel.$formatters.push(function(value)+{
++++++++return+value+&&+value+!=+'false'+?+'true'+:+'false';
++++++});
++++}
++};
});|code-block|syntax|javascript|2795772|优先级是专门设置的，因此它在任何其他指令(通常没有设置优先级，缺省为0)之前完成。|offset|length|style|CODE|2795773|例如，我将此指令(用于真/假选择)与selectpicker指令一起使用，该指令将我的select元素包装在selectpicker引导插件中。|2795774|编辑：|2795775|这里需要注意的是，我忘记提到的是，您的html值必须是字符串值。该指令所做的是在视图和模型之间进行转换，将模型值保留为boolean格式，并将视图保留为string格式：|2795776|%25select.selectpicker{+ng:+{+model:+'modelForm.listed'+},+selectpicker:+'{+}',+boolean:+true+}
++%25option{+value:+'true'+}+Listed
++%25option{+value:+'false'+}+Unlisted|2795777|entityMap^0|0|0|Y|1|0|I|C|17|6|1I|C|0|0|1N|7|24|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@$I|12|J|13|K|L]|$I|14|J|15|K|L]|$I|16|J|17|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@$I|1A|J|1B|K|L]|$I|1C|J|1D|K|L]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$]]

<p>I would recommend using a directive for this. As usual, I try to stay away from timeouts and other async operations in preference of a more authoritative and direct control.</p>

<pre><code>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 &amp;&amp; value != 'false' ? 'true' : 'false';
      });
    }
  };
});
</code></pre>

<p>The priority is set specifically so that it is done prior to any other directives (that usually don't have a priority set, and defaults to <code>0</code>)</p>

<p>For example, I use this directive (for a true/false selection) with my <code>selectpicker</code> directive that wraps my <code>select</code> elements in the <code>selectpicker</code> bootstrap plugin.</p>

<p>Edit:</p>

<p>The caveat here, which I forgot to mention, is that your html values need to be string values. What the directive does is translates between the view and the model, keeping the model value in <code>boolean</code> and your view in <code>string</code> format:</p>

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


blocks|key|183006|text|这也会起作用。只需通过为该值添加一个角度表达式来强制该值为布尔值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183007|<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>|code-block|syntax|javascript|183008|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will work too. Just force the value to be boolean by putting an angular expression in for the value.</p>

<pre><code>&lt;select class="span9" ng-model="proposal.formalStoryboard"&gt;
    &lt;option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false"&gt;
           Not Included
    &lt;/option&gt;
    &lt;option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true"&gt;
            Included
    &lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|184750|text|我为您创建了示例，请查看this。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|184751|它是你想用来驱动ui绑定的模型吗？|184752|<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);
++++}
}|code-block|syntax|javascript|184753|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/YXGKE/^0|C|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I created sample for you, please check <a href="http://jsfiddle.net/YXGKE/" rel="nofollow">this</a> out.</p>

<p>Is it what you want to use model to drive the ui binding?</p>

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

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

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}
</code></pre>


blocks|key|182069|text|我在这个令人沮丧的问题上几乎没有成功。我的解决方案，虽然不是太优雅，因为它是一个额外的代码行，但每次都解决了它。这并不是在每个应用程序中都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|182070|$scope.myObject.myBooleanProperty+=+$scope.myObject.myBooleanProperty.toString();|code-block|syntax|javascript|182071|在尝试将其重新绑定到页面上显示的模型之前，将其转换为“真正的”字符串允许它正确选择值。|182072|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had very little success with this frustrating issue. My solution, while not too elegant since it's an additional line of code, solved it every time. This may not work in every application.</p>

<pre><code>$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();
</code></pre>

<p>Turning it into a "real" string before trying to rebind it to the model displayed on the page allowed it to correctly select the value.</p>


blocks|key|2795794|text|Angular在绑定到ng-model的值和给定选项中的值之间进行了严格的比较。在初始问题中给出的值是字符串"false“和"true”。如果ng-+===的值是bool类型，并且定义为{"+Value+":false}，则字符串和bool之间的Angulars严格===比较永远不会匹配，因此选择框为空。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795795|真正的问题是-如果您选择一个值，Type从bool更改为string+({"+Value+":false}+-->+{“Value”：“false”})如果回发可能会导致错误。|2795796|对我来说，这两个问题的最好解决方案是本帖中的Thiago之一。(https://stackoverflow.com/a/31636437/6319374)|offset|length|2795797|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/31636437/6319374^0|0|0|W|18|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>Angular does a strict comparsion between the Value bind to ng-model and the Values in the given Options. The Values given in the initial Question are the Strings "false" and "true".
If the Value of ng-model is of Type bool and defined like {"Value":false}, Angulars strict === comparsion between string and bool does never match so the select-box is empty.  </p>

<p>The real Problem is- if you select a Value, the Type changed from bool to string ({"Value":false} --> {"Value":"false"})can cause errors if posted back.</p>

<p>The best Solution for both issues for me was the one of Thiago Passos in this Post.
(<a href="https://stackoverflow.com/a/31636437/6319374">https://stackoverflow.com/a/31636437/6319374</a>)</p>


blocks|key|182986|text|<script+type='text/javascript'>
function+MyCntrl($scope)+{
++$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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|182987|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

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


<p>I want to set a boolean value to true or false using a select here is my code:</p>

<pre><code>&lt;select class="span9" ng-model="proposal.formalStoryboard"&gt;
&lt;option value="false"&gt;Not Included&lt;/option&gt;
&lt;option value="true"&gt;Included&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>The value (proposal.formalStoryboard) is set properly to true or false <strong>but the change are not reflected on the select box when the value is already assigned.</strong></p>

<p>I tried ng-value="true" and ng-value="false" instead of just value but it's not working as well.</p>


Angular, boolean value in a select box

我想使用select将布尔值设置为true或false以下是我的代码：<select class="span9" ng-model="proposal.formalStoryboard"><option value="false">Not Included</option><option value="true">Included</option></select>值(proposal.forma

问角度，选择框中的布尔值
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度，选择框中的布尔值EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度，选择框中的布尔值
EN