ng-selected is not working with ng-model in select box - Angularjs

Question

While ng-model is used in select box and ng-selected is also used in options with some condition that time ng-selected is not working.

If I will remove ng-model than ng-selected is working, but if i will remove ng-model than how I should get the value of select box in controller.

Please help !

Here is my code...

HTML:

<select class="form-control" ng-change="accessModeSelected()">
     <option ng-selected="mode.status == '1'"  ng-repeat="mode in storageResult.accessMode" ng-value="mode.name" name="accessMode{{$index}}" id="accessMode">
           {{mode.name}}
     </option>
</select>

AngularJS:

$scope.storageResult   = {
           "storageAccount":"Enable", 
           "user": "sdcard",
           "pass": "sdcard",
           "wifiIP": "0",
           "ipAddr": "0",
           "accessMode": [
                {"name": "Local Storage","status": "0"},
                {"name":"WiFi Storage", "status": "1"},
                {"name":"Internet Storage", "status": "0"}
            ]
         }

have you tried using ng-options instead of ng-repeat? https://docs.angularjs.org/api/ng/directive/ngOptions — JanR, Sep 23 '16 at 05:37
The same code I sent, once I tried it in plunkr. That is working in plunkr but not in my application. I don't know where my app is stucking. — PiyaModi, Sep 23 '16 at 06:49
there seems to be a problem with ng-value directive. if you change the ng-value="mode.name" to value="{{mode.name}}" it works fine. — nikhil mehta, Sep 23 '16 at 07:14

Nishant123 · Accepted Answer · 2016-09-23T06:42:57.263

Use ng-options and ng-init(for setting default value) instead of ng-repeat.

ng-options is specifically for select

<select class="form-control" ng-init="statusselect='WiFi Storage'" ng-model="statusselect" ng-options="mode.name as mode.name for mode in storageResult.accessMode">

</select> Selected Value : {{statusselect}}

FIDDLE

Edit: Using ng-repeat

I would prefer ng-options,but if you want to use ng-selected with ng-repeat you'll need provide a default selected value to ng-model from your controller

<select class="form-control" ng-model="statusselect">
     <option ng-selected="{{mode.name == statusselect}}" ng-repeat="mode in storageResult.accessMode" value="{{mode.name}}" name="accessMode{{$index}}" id="accessMode">
           {{mode.name}}
     </option>
</select> Selected Value : {{statusselect}}

Inside Controller

$scope.storageResult  = {
           "storageAccount":"Enable", 
           "user": "sdcard",
           "pass": "sdcard",
           "wifiIP": "0",
           "ipAddr": "0",
           "accessMode": [
                {"name": "Local Storage","status": "0"},
                {"name":"WiFi Storage", "status": "1"},
                {"name":"Internet Storage", "status": "0"}
            ]
         }
   $scope.statusselect = $scope.storageResult["accessMode"][1]["name"];

FIDDLE

Hi Nishant ! Thanks for answer... but if I will select another option that time I want that name as a input. Here we will get only status. so based on that i can't update my db which mode is enable. In short I want mode name in ng-model — PiyaModi, Sep 23 '16 at 06:38
@PiyaModi I have updated my answer. Now mode name shall be stored in ng-model. The "Selected Value:" besides the select gives you the value that is stored in ng-model. — Nishant123, Sep 23 '16 at 06:47
@PiyaModi By "In short I want mode name in ng-model" Do you mean that you want something like this `ng-model="mode.name"` Is [this](https://jsfiddle.net/Kunalh/LkLask7y/11/) what you want? — Nishant123, Sep 23 '16 at 07:13
Hi Nishant ! Yes.. I want that only... But It s working now with your updated FIDDLE... Thanks for your help... :) — PiyaModi, Sep 24 '16 at 06:59

Sajeetharan · Answer 2 · 2016-09-23T06:11:11.757

2

Use ng-options instead of ng-repeat

<select ng-model="status"  ng-options="mode.status as mode.name for mode in storageResult.accessMode">

and In controller

app.controller("dobController", ["$scope", "$http",
  function($scope, $http) {

    $scope.storageResult = {
      "storageAccount": "Enable",
      "user": "sdcard",
      "pass": "sdcard",
      "wifiIP": "0",
      "ipAddr": "0",
      "accessMode": [{
        "name": "Local Storage",
        "status": "0"
      }, {
        "name": "WiFi Storage",
        "status": "1"
      }, {
        "name": "Internet Storage",
        "status": "0"
      }]
    };
    $scope.status = '1';

  }
]);

DEMO

edited Sep 23 '16 at 06:11

answered Sep 23 '16 at 05:39

Sajeetharan

216,225
63
350
396

Hi Sajeetharan ! Thanks for answer... but if I will select another option that time I want that name as an input. Here we will get only status. so based on that i can't update my db, which mode is enable. In short I want mode name in ng-model – PiyaModi Sep 23 '16 at 06:47

score 1 · Answer 3 · answered Sep 23 '16 at 07:16

I'm sure there are many ways to answer this question and a lot of answers have been provided,but based on OP's question on how to send 'mode.name' into ng-model I've explained below using ng-options.

In your JS

var app = angular.module('todoApp', []);

    app.controller("dobController", ["$scope", "$http",
        function($scope, $http) {


            $scope.storageResult = {
                "storageAccount": "Enable",
                "user": "sdcard",
                "pass": "sdcard",
                "wifiIP": "0",
                "ipAddr": "0",
                "accessMode": [{
                    "name": "Local Storage",
                    "status": "0"
                }, {
                    "name": "WiFi Storage",
                    "status": "1"
                }, {
                    "name": "Internet Storage",
                    "status": "0"
                }]
            };
            $scope.status = $scope.storageResult.accessMode[0].name;
            $scope.selectedItem = '';

        }
    ]);

In your HTML to bind mode name to ng-model follow this.

<select ng-model="status"  ng-options="mode.name as mode.name for mode in storageResult.accessMode">

To bind entire object you can try below syntax

<select ng-model="status"  ng-options="mode as mode.name for mode in storageResult.accessMode">

For this make small change in your JS $scope.status like

$scope.status = $scope.storageResult.accessMode[0];

Here is a DEMO plunker

ng-selected is not working with ng-model in select box - Angularjs

3 Answers3

Linked