Search code examples
angularjsangularjs-ng-modelangularjs-ng-options

angularjs how to show binary value as text in ng-model drop down select


In angularjs I am getting a json array as input that has binary data (true/false). The same data I want to show as text in my "ng-model" drop down select.

My input

$scope.string = [
    {"_attributes":{"name":"password"},"_text":"password"},
    {"_attributes":{"name":"url"},"_text":"mushmatch"},
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":true},
    {"_attributes":{"name":"value"},"_text":123}
    ]

My HTML code,

<span>Check1: <input type="checkbox" 
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/></span>
<br>  
<span>Check2: <input type="input" 
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/></span>

<br>
<span>Check3:<select ng-repeat="x in string | filter : 'check'" ng-model="x._text" ng-options="x for x in ['true','false']">
    </select></span>

The Check1 and Check2 are showing properly but Check3 is not showing initial value as selected. It works when I select from drop down but the requirement to show the present value first , then option to change.

Also I want to know if it is possible to show True/False rather than true/false (in initcap format).

Please let me know how to achieve this. I have created below plunkr also.

Plunkr


Solution

  • change your select element ng-options to boolean true and false

    <span>Check3:<select ng-repeat="x in string | filter : 'check'" ng-model="x._text" ng-options="x for x in [true,false]">