Stuck with issue - In AngularJS, select box default value selection and adding new field to existing model

Question

Stack: AngularJS 1.2

The issue I am facing is making the select box selected to the default value ("Shipped") passed on by the server for order.status field in JSON -

{
  "id": "52b4216330045ba67a99175c",
  "productIdentity": {
    "name": "X",
    "description": "test"
  },
  "status": "Shipped"
}

Controller: https://gist.github.com/pawank/8079603
HTML: https://gist.github.com/pawank/8079624

Problem 1: How to make the select box with ID - "selectedStatus" set to default value "Shipped"?

Problem 2: "order.comment" is not getting passed on to Controller in save_order_edit_form() function from the HTML on click of "Save Changes"

Any help is appreciated.

Thanks,

please, copy code example to Fiddle/Plunker, here is template: http://jsfiddle.net/9Ymvt/887/ — Maxim Shoustin, Dec 22 '13 at 08:33
Hi Maxim, Added code in JSFiddle. Can you please help here now? API call is simulated too with dummy data. — pawank, Dec 22 '13 at 08:42

Maxim Shoustin · Answer 1 · 2013-12-22T09:38:14.650

I would write select by this way:

                 <select data-width="off"                            
                     data-minimum-results-for-search="10"                             
                      tabindex="-1" class="chzn-select select-block-level" id="default-select"
                       >
                        <option ng-repeat="v in orderStatus"
                           value="{{v.id}}"
                           title="{{v.id}}"
                          ng-selected="orderStatus.indexOf(v) == 1"
                           >{{v.value}}</option>                              
                       </select>

Demo 1 Fiddle

However, if you want to use ng-options:

                  <select
                                        data-width="off"
                                        data-minimum-results-for-search="10"
                                        tabindex="-1"
                                        class="chzn-select select-block-level" id="default-select" 
                    ng-model="order_status" 
                    ng-options="order_status.id as order_status.value for order_status in orderStatus" 
                    >
                   </select>

and in controller:

 $scope.order_status = $scope.orderStatus[1].value;

Demo 2 Fiddle

Demo 2 is working if $scope.order_status = $scope.orderStatus[1].value; is called before calling the API method (fetchOrderLineByID). Event the older code was working if the data is directly made available in controller rather than from API. But, if I set order_status after getting the response from API server, its NOT working. Since, the order JSON can have any status 'New', 'Shipped' or 'Cancelled', its index cannot be set before knowing the status value from JSON. Hope I made myself clear? Thanks in advance. — pawank, Dec 22 '13 at 10:01
see this example , I added timeout that simulates async call: http://jsfiddle.net/9Ymvt/898/ — Maxim Shoustin, Dec 22 '13 at 10:13
Its working as a standalone example, but, somehow not working with my application. I will revisit my implementation keeping pointers from your suggestion and see if it works. Thanks! — pawank, Dec 22 '13 at 10:32

Stuck with issue - In AngularJS, select box default value selection and adding new field to existing model

1 Answers1