使用ng-model具有预选值的ng-options不起作用

Question

I know there are lots of similar questions all around, but i have no clues why this is not working for me? I want size '4x4' as preselected in the dropdown. '4x4' is now static but finally i will replace '4x4' with a variable that will provide dynamic sizes.

Here is my Controller code:

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

And here is view code:

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

Answer 1

try this

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

Demo

 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> </div> 

Answer 2

I would change the template to

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

and the controller to

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

Answer 3

Call first object in ng-init ng-init="selected.size = sizes[0];" and should initialize selected object like $scope.selected={}

Working Demo

 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={}; }); 

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

Update

'4x4' is now static but finally i will replace '4x4' with a variable that will provide dynamic sizes.

You can create a new scope object (as YourDynamicObject ) and assign the dynamic value. it will be affect in ng-init

Code like

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

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

Answer 4

try some thing like this:

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