選擇框中的角度、布爾值
[英]Angular, boolean value in a select box
問題描述
我想使用選擇將布爾值設置為 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，但它不起作用。
10 個解決方案
解決方案1
88 已采納 2013-07-19 19:52:52
編輯：評論者指出，我原來的解決方案沒有像聲稱的那樣工作。 我已更新答案以反映以下其他人給出的正確答案（我無法刪除已接受的答案）。
對於 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;
}
解決方案2
59 2013-08-08 14:40:47
只是這樣做：
<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>
並定義：
$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
解決方案3
34 2015-07-26 11:27:54
為什么不直接使用這個？
<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
解決方案4
12 2017-12-21 22:14:59
如果您使用的是 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>
它也適用於收音機和復選框。
解決方案5
2 2015-10-29 04:43:32
我建議為此使用指令。 像往常一樣，我盡量遠離超時和其他異步操作，而傾向於更權威和直接的控制。
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
解決方案6
2 2017-08-18 20:03:29
這也會起作用。 只需通過為該值放置一個角度表達式來強制該值成為布爾值。
<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>
解決方案7
1 2013-07-19 19:56:34
我創建的樣本給你，請檢查該出來。
是你想用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);
}
}
解決方案8
0 2015-02-09 01:02:47
我在這個令人沮喪的問題上幾乎沒有成功。 我的解決方案雖然不太優雅，因為它是額外的一行代碼，但每次都解決了。 這可能不適用於每個應用程序。
$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();
在嘗試將其重新綁定到頁面上顯示的模型之前將其轉換為“真實”字符串，可以使其正確選擇值。
解決方案9
0 2016-05-11 13:09:04
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 )
解決方案10
-3 2015-04-28 04:47:19
<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>
Angular 6：將 select 框值的選定值傳遞給 ngSubmit 上的組件
[英]Angular 6 : Passing selected value of select box value to the component on ngSubmit
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.