i'm trying to understand how controllers works in angularjs using cascade dropdowns. But my second dropdown is not being populated based on the previous dropdown value.
My JSON arry result:
[{
"id": "23031",
"fabricante": "ALFA ROMEO",
"modelo": "33",
"motor": "1.3 \/ 1.3 ie",
"combustivel": "Gasolina \/ GNV",
"ano_vela": "",
"ngk": "",
"ngk_green": "BPR6EY",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}, {
"id": "23057",
"fabricante": "ARO",
"modelo": "Serie 10",
"motor": "1.4",
"combustivel": "Gasolina \/ GNV",
"ano_vela": "",
"ngk": "BP6HS",
"ngk_green": "",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}]
My Controller EDITED:
angular.module('starter.controllers', [])
.controller('fabricanteController', ['$scope','$http', function($scope, $http) {
$http.get('JSON_PATH').success(function (data) {
$scope.fabricantes = data;
$scope.$watch('fabricante', function(newVal) {
if (newVal) $scope.modelo = data;
console.log($scope.modelo);
});
});
}]);
And my HTML:
<label class="item item-input item-select">
<div class="input-label">
Fabricante
</div>
<select ng-model="fabricante" ng-options="fab.fabricante for fab in fabricantes track by fab.fabricante">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Modelo
</div>
<select ng-model="modelo" ng-options="mod.modelo for mod in fabricantes">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
Tried to look around how to make it work but no luck.
Any idea why?
If you wanna show the 'modelo' property of the selected 'fabricante' object you must point the ng-option of your second DDL to a new $scope array variable such:
$scope.modelos = [{"modelo": newVal.modelo}];
Your ng-options should be:
<select ng-model="test" ng-options="mod.modelo for mod in modelos">
Here is a working JSFiddle
Hope this helps.
Your watch isn't firing because you're passing in a string, not a variable. Also, I don't know where you're checking newVal, but it won't work like that..
Basic implementation:
$scope.$watch($scope.fabricante, function() {
$scope.modelo = data;
console.log($scope.modelo);
});
With newVal checking:
$scope.$watch($scope.fabricante, function() {
if($scope.modelo!=data)
{
$scope.modelo = data;
console.log($scope.modelo);
}
});
You can also use ng-change on the Select box, which will fire on any change.
<select ng-model="fabricante" ng-change="doSomething()" ng-options="fab.id for fab in fabricantes"></select>
Related
I am using Angular JS and I need to set a selected option of a dropdown list control using angular JS. Forgive me if this is ridiculous but I am new with Angular JS
Here is the dropdown list control of my html
<select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
ng-show="item.id==8" ng-model="item.selectedVariant"
ng-change="calculateServicesSubTotal(item)"
ng-options="v.name for v in variants | filter:{type:2}">
</select>
After it gets populated I get
<select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 && item.quantity > 0" class="ng-pristine ng-valid ng-valid-required">
<option value="?" selected="selected"></option>
<option value="0">set of 6 traits</option>
<option value="1">5 complete sets</option>
</select>
How can I set the control for value="0" to be selected?
I hope I understand your question, but the ng-model directive creates a two-way binding between the selected item in the control and the value of item.selectedVariant. This means that changing item.selectedVariant in JavaScript, or changing the value in the control, updates the other. If item.selectedVariant has a value of 0, that item should get selected.
If variants is an array of objects, item.selectedVariant must be set to one of those objects. I do not know which information you have in your scope, but here's an example:
JS:
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
HTML:
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
This would leave the "b" item to be selected.
I don't know if this will help anyone or not but as I was facing the same issue I thought of sharing how I got the solution.
You can use track by attribute in your ng-options.
Assume that you have:
variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]
You can mention your ng-options as:
ng-options="v.name for v in variants track by v.id"
Hope this helps someone in future.
If you assign value 0 to item.selectedVariant it should be selected automatically.
Check out sample on http://docs.angularjs.org/api/ng.directive:select which selects red color by default by simply assigning $scope.color='red'.
i see here already wrote good answers, but sometime to write the same in other form can be helpful
<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['a', 'b', 'c', 'd', 'e'];
$scope.referral = {
organization: $scope.organizations[2]
};
}
</script>
Simple way
If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way.
Simple example
Inside Controller:
$scope.Users = ["Suresh","Mahesh","Ramesh"];
$scope.selectedUser = $scope.Users[0];
Your HTML
<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>
complex example
Inside Controller:
$scope.JSON = {
"ResponseObject":
[{
"Name": "Suresh",
"userID": 1
},
{
"Name": "Mahesh",
"userID": 2
}]
};
$scope.selectedUser = $scope.JSON.ResponseObject[0];
Your HTML
<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>
It can be usefull. Bindings dose not always work.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products">
</select>
For example. You fill options list source model from rest-service. Selected value was known befor filling list and was set. After executing rest-request with $http list option be done. But selected option is not set. By unknown reasons AngularJS in shadow $digest executing not bind selected as it shuold be. I gotta use JQuery to set selected. It`s important! Angular in shadow add prefix to value of attr "value" for generated by ng-repeat optinos. For int it is "number:".
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
//$scope.issue.productId = productId;//not work at all
}, 200);
}
});
}
Try the following:
JS file
this.options = {
languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);
HTML file
<div class="form-group col-sm-6">
<label>Preferred language</label>
<select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
</select>
</div>
This is the code what I used for the set selected value
countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
for (var j = 0; j < countryList.length; j++) {
//debugger
if (countryList[j].text == "Australia") {
console.log(countryList[j].text);
countryList[j].isSelected = 'selected';
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country" >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}" > {{country.text}}</option>
</select>
try this on an angular framework
JS:
$scope.options = [
{
name: "a",
id: 1
},
{
name: "b",
id: 2
}
];
$scope.selectedOption = $scope.options[1];
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>
now when i access the value if {{selectedQuestion.Title}} i am getting proper value,
when i am accessing value of {{selectedQuestion.ID}} also i am getting proper value,
what i actually need is value of {{selectedQuestion.ControlPrefix}} to be accessed in model(javascript) but it cannot be accessed neither in UI with {{selectedQuestion.ControlPrefix}} nor in model like
$scope.Newmodel = {
Title: "New Question Title",
ControlPrefix: $scope.selectedQuestion.ControlPrefix
};
basicaly i want the value inside the $scope.Newmodel.ControlPrefix variable i.e $scope.Newmodel.ControlPrefix
**tabnames array/objet is below**
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},
I don't See any problem with this, please check and verify -
var app = angular.module("myApp",[]);
app.controller("myCntr",function($scope){
$scope.tabnames = [
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},]
$scope.NewQuestionmodel = {
Title: "",
QuestionTypeID: "",
};
$scope.Dosomething = function(selectedQuestion){
$scope.NewQuestionmodel.Title = selectedQuestion.Title;
$scope.NewQuestionmodel.QuestionTypeID= selectedQuestion.ID;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames" ng-change="Dosomething(selectedQuestion)">
</select>
<br>
<span>FRom UI - Selected Question Title : {{selectedQuestion.Title}} </span><br>
<span>From UI - Selected Question ID : {{selectedQuestion.ID}} </span><br>
<span>From UI - Selected Question ControlPrefix : {{selectedQuestion.ControlPrefix}} </span><br><br>
<br>
<span>Selected Question Title from Backend is {{NewQuestionmodel.Title}}</span><br>
<span>Selected Question ID from Backend is {{NewQuestionmodel.QuestionTypeID}}</span>
</div>
I am trying to use ngRepeat. Within that, I have a select element whos options vary depending on another select. I currently am calling vm.getOperators(filter.keyIndex) in the ng-options, but I get and indefinite loop error from angular. How can I have the following "filterOperator" select options depend on filterColumn select value within an ngRepeat?
html:
<div class="form-group row" ng-repeat="filter in vm.filters">
<div class="col-sm-4">
<select class="form-control" name="filterColumn" ng-model="filter.keyIndex">
<option ng-repeat="key in vm.filterOptions.keys"
value="{{ $index }}">
{{ key.column }}
</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control" name="filterOperator" ng-model="filter.operator" ng-options="key as value for (key, value) in vm.getOperators(filter.keyIndex)"></select>
</div>
<div class="col-sm-4" ng-model="filter.value">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-1" ng-show="$last" ng-click="removeFilter($index)">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
</div>
<div class="col-sm-1" ng-show="vm.filters.length > 1" ng-click="addFilter()">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
controller.js:
app.controller('searchCtrl', function() {
var defaultFilter = {
keyIndex: "0",
operator: "",
value: "",
};
var operatorMap = {
"0": "=",
"1": "<",
};
var vm = this;
vm.filterOptions = {
"operators": {
"type1": ["0", "3"],
"type2": ["1", "2", "3"]
},
"keys": [
{
"datatype": "type1",
"name": "a",
"column": "col1"
},
{
"datatype": "type1",
"name": "b",
"column": "col2"
},
{
"datatype": "type2",
"name": "c",
"column": "col3"
}
]
};
vm.filters = [];
//vm.removeFilter = removeFilter;
//vm.addFilter = addFilter;
vm.getOperators = getOperators;
function getOperators(keyIndex) {
var operators = [];
var dataType = vm.filterOptions.keys[keyIndex].datatype;
if (vm.filterOptions.operators[dataType]) {
angular.forEach(vm.filterOptions.operators[dataType], function (operator, index) {
var obj = {};
obj[dataType] = (operatorMap[operator] ? operatorMap[operator] : operator);
operators.push(obj);
});
}
return operators;
}
(function init() {
// I am actually getting the filterOptions with a REST call, but I've included the data already
// The following is done after the successful REST call
// add the first filter
var filter = defaultFilter;
filter.operator = Object.keys(getOperators(filter.keyIndex))[0];
vm.filters.push(filter);
}).call();
});
Here's a plunker: https://plnkr.co/edit/yGyvwThuWWnNph72OAT0
Okay, so I figured this out.
First, don't generate an array in the getOperators method. You can return and array that is already defined, but you can't generate a new array here. This leads to an indefinite loop as angular detects a change and call the getOperators method again.
So what I did was...
after the data was fetched from the REST service, I call a function "transformOperators". This implements the looping I was doing in "getOperators" and stores this "transformed data" in a class level object.
in "getOperators" I simply do an object lookup and return the results.
I am using Angular JS and I need to set a selected option of a dropdown list control using angular JS. Forgive me if this is ridiculous but I am new with Angular JS
Here is the dropdown list control of my html
<select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
ng-show="item.id==8" ng-model="item.selectedVariant"
ng-change="calculateServicesSubTotal(item)"
ng-options="v.name for v in variants | filter:{type:2}">
</select>
After it gets populated I get
<select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 && item.quantity > 0" class="ng-pristine ng-valid ng-valid-required">
<option value="?" selected="selected"></option>
<option value="0">set of 6 traits</option>
<option value="1">5 complete sets</option>
</select>
How can I set the control for value="0" to be selected?
I hope I understand your question, but the ng-model directive creates a two-way binding between the selected item in the control and the value of item.selectedVariant. This means that changing item.selectedVariant in JavaScript, or changing the value in the control, updates the other. If item.selectedVariant has a value of 0, that item should get selected.
If variants is an array of objects, item.selectedVariant must be set to one of those objects. I do not know which information you have in your scope, but here's an example:
JS:
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
HTML:
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
This would leave the "b" item to be selected.
I don't know if this will help anyone or not but as I was facing the same issue I thought of sharing how I got the solution.
You can use track by attribute in your ng-options.
Assume that you have:
variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]
You can mention your ng-options as:
ng-options="v.name for v in variants track by v.id"
Hope this helps someone in future.
If you assign value 0 to item.selectedVariant it should be selected automatically.
Check out sample on http://docs.angularjs.org/api/ng.directive:select which selects red color by default by simply assigning $scope.color='red'.
i see here already wrote good answers, but sometime to write the same in other form can be helpful
<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['a', 'b', 'c', 'd', 'e'];
$scope.referral = {
organization: $scope.organizations[2]
};
}
</script>
Simple way
If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way.
Simple example
Inside Controller:
$scope.Users = ["Suresh","Mahesh","Ramesh"];
$scope.selectedUser = $scope.Users[0];
Your HTML
<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>
complex example
Inside Controller:
$scope.JSON = {
"ResponseObject":
[{
"Name": "Suresh",
"userID": 1
},
{
"Name": "Mahesh",
"userID": 2
}]
};
$scope.selectedUser = $scope.JSON.ResponseObject[0];
Your HTML
<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>
It can be usefull. Bindings dose not always work.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products">
</select>
For example. You fill options list source model from rest-service. Selected value was known befor filling list and was set. After executing rest-request with $http list option be done. But selected option is not set. By unknown reasons AngularJS in shadow $digest executing not bind selected as it shuold be. I gotta use JQuery to set selected. It`s important! Angular in shadow add prefix to value of attr "value" for generated by ng-repeat optinos. For int it is "number:".
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
//$scope.issue.productId = productId;//not work at all
}, 200);
}
});
}
Try the following:
JS file
this.options = {
languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);
HTML file
<div class="form-group col-sm-6">
<label>Preferred language</label>
<select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
</select>
</div>
This is the code what I used for the set selected value
countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
for (var j = 0; j < countryList.length; j++) {
//debugger
if (countryList[j].text == "Australia") {
console.log(countryList[j].text);
countryList[j].isSelected = 'selected';
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country" >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}" > {{country.text}}</option>
</select>
try this on an angular framework
JS:
$scope.options = [
{
name: "a",
id: 1
},
{
name: "b",
id: 2
}
];
$scope.selectedOption = $scope.options[1];
I am trying to use knockoutjs 1.2.l and with following code
$(function() {
var viewModel = {
categories: ko.observableArray([
{"Selected": false, "Text": "Rooms", "Value": "1"},
{"Selected": false, "Text": "Automobile", "Value": "2"},
{"Selected": false, "Text": "Buy & Sell", "Value": "3"},
{"Selected": false, "Text": "Tutions", "Value": "4"},
{"Selected": false, "Text": "Immigration", "Value": "5"}
]),
initialData: {
"Description": null,
"SubCategoryId": 0,
"Title": null,
"UserId": 0,
"AdTypeId": 0,
"AddressId": null,
"SubCategory": null,
"User": null,
"AdType": null,
"Address": null,
"Id": 0,
"CreatedOn": "\/Date(1307627158991)\/",
"CreatedBy": 0,
"LastUpdatedOn": "\/Date(1307627158991)\/",
"LastUpdatedBy": 0
},
chosenCategory: ko.observable()
};
ko.applyBindings(viewModel); // Makes Knockout get to work
});
Follwing is the html
<div id="createAdDiv">
<form action="/Ads/Create" method="post"> <p>
You've chosen: <b data-bind="text: chosenCategory().Text"></b>(Value: <span data-bind='text: chosenCategory().Value'></span>)
</p>
<div data-bind="visible: chosenCategory"> <!-- Appears when you select something -->
You have chosen a country with population
<span data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></span>.
</div>
<fieldset>
<div class="editor-label">
<label for="SubCategoryId">Choose a Sub Category</label>
</div>
<div class="editor-field">
<select data-bind="options: categories,optionsCaption:'Choose...',optionsText: 'Text',value:chosenCategory" data-val="true" data-val-number="The field Choose a Sub Category must be a number." data-val-required="The Choose a Sub Category field is required." id="SubCategoryId" name="SubCategoryId"></select>
<span class="field-validation-valid" data-valmsg-for="SubCategoryId" data-valmsg-replace="true"></span>
</div>
</fieldset>
</form></div>
Throws the exception.
Unable to parse binding attribute. Message: TypeError: chosenCategory() is undefined;
Attribute value: text: chosenCategory().Text
But, if I change javascript to following it works
$(function() {
var viewModel = {
categories: ko.observableArray( [{"Selected":false,"Text":"Rooms","Value":"1"},{"Selected":false,"Text":"Automobile","Value":"2"},{"Selected":false,"Text":"Buy & Sell","Value":"3"},{"Selected":false,"Text":"Tutions","Value":"4"},{"Selected":false,"Text":"Immigration","Value":"5"}] )
,initialData: {"Description":null,"SubCategoryId":0,"Title":null,"UserId":0,"AdTypeId":0,"AddressId":null,"SubCategory":null,"User":null,"AdType":null,"Address":null,"Id":0,"CreatedOn":"\/Date(1307628565958)\/","CreatedBy":0,"LastUpdatedOn":"\/Date(1307628565958)\/","LastUpdatedBy":0}
};
viewModel.chosenCategory = ko.observable(viewModel.categories);
ko.applyBindings(viewModel); // Makes Knockout get to work
});
I am following an example from knockout.js website only.
You are going to want to check for null in your first paragraph tag like:
<p>
You've chosen: <b data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></b>(Value: <span data-bind="text:chosenCategory() ? chosenCategory().Value : 'unknown'"></span>)
</p>
In your second snippet of code, it is working because it is reading Text and Value properties from viewModel.categories, which are just empty. If you want to set a default, then you would want to do something like viewModel.chosenCategory = ko.observable(viewModel.categories()[0]);
Another alternative is to use a template for that section and pass in chosenCategory, as they handle nulls without any extra work. Although, it would just not render that section, rather than display something like 'Unknown'