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

问题:

This question already has answers here:

AngularJS: ng-selected doesn't show selected value [duplicate] (2 answers)

Closed 2 years ago.

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"}
            ]
         }

回答1:

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

回答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

回答3:

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