ng-selected 无法在 select 框中使用 ng-model - Angularjs

Question

虽然 ng-model 在 select 框中使用，而 ng-selected 也在选项中使用，但在某些情况下，时间 ng-selected 不起作用。

如果我将删除 ng-model 而不是 ng-selected 正在工作，但是如果我将删除 ng-model 而不是我应该如何在控制器中获取 select 框的值。

请帮忙！

这是我的代码...

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

Answer 1

使用 ng-options 代替 ng-repeat

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

并在控制器中

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

Answer 2

使用ng-options和ng-init（用于设置默认值）而不是ng-repeat。

ng-options 专门针对 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

编辑：使用 ng-repeat

我更喜欢 ng-options，但是如果您想将 ng-selected 与 ng-repeat 一起使用，您需要从 [=] 中为 ng-model 提供一个默认的选定值23=]

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

内部控制器

$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

Answer 3

我确定有很多方法可以回答这个问题，并且已经提供了很多答案，但是基于 OP 关于如何将“mode.name”发送到 ng-model I 的问题下面使用 ng-options.

进行了解释

在你的 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 = '';

        }
    ]);

在你的 HTML 中将模式名称绑定到 ng-model 遵循这个。

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

要绑定整个对象，您可以尝试以下语法

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

为此，请在您的 JS $scope.status 中做一些小改动，例如

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

这是一个DEMO plunker

ng-selected 无法在 select 框中使用 ng-model - Angularjs

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

angularjs

angularjs-ng-repeat

angularjs-ng-model

angularjs-select