CODEWITHSUNDEEP
knockout.js
user123456
user123456

Reputation: 2659

How to bind drop down list in knockoutjs to model object, but changing it's text value?

I am using knockoutjs I am having a drop down list. My drop down list is corresponding to a Boolean observable variable called (booleanValue) depending on user selection (true, false). The functionality is working as I am excepting, but I want to change the drop down list text. For example instead of true, I want it to be All,and for false I want to be none. Here is my code so far :

html select tag :

<select data-bind="options: availableOptioons, selectedOptions: booleanValue, value :booleanValue"></select>

My View Model 

  function ViewModel(model) {
        this.booleanValue= ko.observable(model.BooleanValueComingFromServer);
        this.availableOptioons = ko.observableArray([true,false]);
    };

I am also hidding and showing some html depending on booleanValue : 

<table class="form" style="width: 100%">
  <tbody>
            <tr data-bind="visible: booleanValue">
                <td>Team</td>
                <td>Score</td>
            </tr>
            <tr data-bind="visible: !$root.booleanValue()">
                <td>Student</td>
                <td>Grade</td>
            </tr>
   </tbody>
 </table>

As I mentioned before, changing the drop down list selected value will change the UI correctly. I am just missing to change the true --> all, false --> none.

Any Idea how can I achieve this ?.

Thanks.

Upvotes: 2

Views: 1488

Answers (2)

pax162
pax162

Reputation: 4735

optionsText is what you need, check the docs: http://knockoutjs.com/documentation/options-binding.html.

If you use optionsText, note that the values in the observableArray will be objects, and no longer just true/false. This will involve some extra work to get the actual true/false values and to match the current selected option with what comes from the server.

Example: http://jsfiddle.net/CYVf5/2/

html:

<select data-bind="options: availableOptions, optionsText: 'label', value :booleanValue"></select>
<br />
actualValue: <span data-bind="text:actualValue"></span>

js:

  function ViewModel() {
        this.availableOptions = ko.observableArray([
            {
                label:'All',
                value:true
            },
            {
                label:'none',
                value:false
            }
            ]);      

        this.booleanValue= ko.observable(this.availableOptions()[0]);  
      this.actualValue = ko.computed(function(){
          return this.booleanValue().value;
      },this);      
    };

var vm = new ViewModel();
ko.applyBindings(vm);

Upvotes: 1

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16465

Knokcout has optionsText binding for for this:

<select data-bind="options: availableOptioons, optionsText: 'text', optionsValue: 'id', value :booleanValue"></select>

And modify availableOptioons array:

  this.availableOptioons = ko.observableArray([{
      text: "All",
      id: true
  }, {
      text: "None",
      id: false
  }]);

Here is working fiddle: http://jsfiddle.net/D3aMj/

Upvotes: 3

Related Questions