在Knockoutjs中,可以为选项绑定的子元素设置条件
e.g:
viewModel.array([{name: 1, show: true}, {name: 2, show: false}, {name: 3, show: true}]);
<select data-bind="options: array, optionsText: name, if: show"></select>
将显示在选择框中:
1
3
答案 0 :(得分:2)
结帐demo
你可以这样做:
<select data-bind="value: selectedCountry , foreach : countryArray" >
<!-- ko if: show -->
<option data-bind="value : name, text : name "></option>
<!-- /ko -->
</select>
function viewModel() {
var self = this;
this.countryArray = ko.observableArray([{"name" : "France" ,"show" : true},
{"name" : "Italy" , "show" : true},
{"name":"Germany" , "show" : false}]);
this.selectedCountry = ko.observable("");
}
$(document).ready(function() {
var vm = new viewModel();
ko.applyBindings(vm);
})
答案 1 :(得分:2)
试试这个demo
这是2017年的更新:执行此操作的最佳方式(特别是没有无容器条件绑定)来自post-processing选项绑定的淘汰文档,使用optionsAfterRender绑定。 optionsAfterRender已在2.3版本中添加
您的代码如下所示:
<select data-bind="value: selectedCountry , options : countryArray, optionsText: 'name', optionsAfterRender: setOptionsShow" ></select>
function viewModel() {
var self = this;
this.countryArray = ko.observableArray([{"name" : "France" ,"show" : true},
{"name" : "Italy" , "show" : true},
{"name":"Germany" , "show" : false}]);
this.selectedCountry = ko.observable("");
this.setOptionsShow = function(option, item) {
ko.applyBindingsToNode(option, {visible: item.show}, item);
}
}
$(document).ready(function() {
var vm = new viewModel();
ko.applyBindings(vm);
})