使用ng-model无效的ng-options具有预先选择的值

Question

我知道周围有很多类似的问题，但我没有线索为什么这对我不起作用？我希望在下拉列表中预先选择尺寸'4x4'。 '4x4'现在是静态的，但最后我将用一个可提供动态尺寸的变量替换'4x4'。

这是我的控制器代码：

    $scope.sizes = [{
                        size: '4 x 4',
                        price: 1.00  
                    },
                    {
                        size: '4 x 6',
                        price: 5.00
                    },
                    {
                        size: '4 x 8',
                        price: 7.00
                    },
                    {
                        size: '5 x 6',
                        price: 9.00
                    },
                    {
                        size: '5 x 8',
                        price: 10.00
                    },
                    {
                        size: '6 x 8',
                        price: 15.00
                    }]

   $scope.selected = {
      "size": '4 x 4'
   }

这是查看代码：

<select class="form-control" ng-model="selected.size" ng-options="item.size for item in sizes">
</select>

Answer 1

试试这个

 $scope.selected = $scope.sizes[0];
  <select class="form-control" ng-model="selected" ng-options="item.size for item in sizes">

<强>演示

＆＃13;

＆＃13;

angular.module("App", [])
 .controller("mainCtrl", function($scope){
   $scope.sizes = [{
                        size: '4 x 4',
                        price: 1.00  
                    },
                    {
                        size: '4 x 6',
                        price: 5.00
                    },
                    {
                        size: '4 x 8',
                        price: 7.00
                    },
                    {
                        size: '5 x 6',
                        price: 9.00
                    },
                    {
                        size: '5 x 8',
                        price: 10.00
                    },
                    {
                        size: '6 x 8',
                        price: 15.00
                    }]
$scope.selected =    $scope.sizes[0];
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="mainCtrl as keyVar" class="container">
<select class="form-control" ng-model="selected" ng-options="item.size for item in sizes">
</select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会将模板更改为

<select class="form-control" ng-model="selected" ng-options="item.size for item in sizes">
</select>

和控制器

$scope.selected = $scope.sizes[0];

Answer 3

  

在ng-init ng-init="selected.size = sizes[0];"中调用第一个对象，并应初始化selected对象，如$scope.selected={}

工作演示

＆＃13;

＆＃13;

angular.module("App", [])
 .controller("mainCtrl", function($scope){
   $scope.sizes = [{
                        size: '4 x 4',
                        price: 1.00  
                    },
                    {
                        size: '4 x 6',
                        price: 5.00
                    },
                    {
                        size: '4 x 8',
                        price: 7.00
                    },
                    {
                        size: '5 x 6',
                        price: 9.00
                    },
                    {
                        size: '5 x 8',
                        price: 10.00
                    },
                    {
                        size: '6 x 8',
                        price: 15.00
                    }]
  $scope.selected={};
       
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="mainCtrl as keyVar" class="container">
<select class="form-control" ng-model="selected.size" ng-init="selected.size = sizes[0];"  ng-options="item.size for item in sizes">
</select>
</div>

＆＃13;

＆＃13;

＆＃13;

更新

  

＆＃39; 4×4＆＃39;现在是静态的，但最后我将取代＆＃39; 4x4＆＃39;使用可提供动态尺寸的变量。

您可以创建新的范围对象（YourDynamicObject）并分配动态值。它将在ng-init中受到影响

代码

ng-init="selected.size = YourDynamicObject"  // html 

$scope.YourDynamicObject=$scope.size[dynamicindex];//controller

Answer 4

尝试这样的事情：

  <select ng-init="selected= sizes[0]" 
            ng-model="selected" 
            ng-options="item.size for item in sizes">
    </select>

Answer 5

angular.module("App", [])
 .controller("mainCtrl", function($scope){
   $scope.sizes = [{
                        size: '4 x 4',
                        price: 1.00  
                    },
                    {
                        size: '4 x 6',
                        price: 5.00
                    },
                    {
                        size: '4 x 8',
                        price: 7.00
                    },
                    {
                        size: '5 x 6',
                        price: 9.00
                    },
                    {
                        size: '5 x 8',
                        price: 10.00
                    },
                    {
                        size: '6 x 8',
                        price: 15.00
                    }]
$scope.selected =    $scope.sizes[0];
   
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="mainCtrl as keyVar" class="container">
<select class="form-control" ng-model="selected" ng-options="item.size for item in sizes">
</select>
  <p>{{selected}}</p>
</div>