在selectbox中設置選定的值angularjs

Question

我有一個選擇框，其中的選項從我的後端填充。

<tr> 
    <td class="col-lg-4">Superkund</td> 
    <td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item.namn for item in superkundOptions" ng-change="onChangeSuperCustomer(selectedSupercustomer)"></select></td> 
</tr> 

$http.get($rootScope.appUrl + '/nao/abb/getSuperkundData/' + $rootScope.abbForm).success(function(data) { 
      $scope.superkundOptions = data; 
     }); 

我遇到的問題是第一行是空行，我想用選定的值替換空。我試過這個：

$scope.selectedSupercustomer = "fish" 

但這並不奏效。任何人都可以幫助我？

Answer 1

使用ng-init。例如ng-init的第一個項目選擇：

<select ng-init="selectedSupercustomer = superkundOptions[0]" ... ></select> 

JSFiddle Example

Answer 2

選擇框與參考一起使用。這意味着，您必須將型號$scope.selectedSupercustomer設置爲$ scope.superkundOptions [ID/INDEX_OF_「fish」]。

Answer 3

你可以看看這個例子

HTML：

<div ng-app="myApp" ng-controller="SomeController"> 
    <div ng-repeat="Person in People"> 
     <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div> 
     <div class="listitem" ng-repeat="Choice in Person.Choices"> 
      {{Choice.Name}}: 
      <select 
       ng-model="Choice.SelectedOption"     
       ng-options="choice.Name for choice in Choice.Options track by choice.ID"></select> 
      {{Choice.SelectedOption.ID}} 
     </div> 
    </div> 
</div> 

的JavaScript：

var myApp = angular.module('myApp', []); 
myApp.controller("SomeController", function($scope) { 
    $scope.People = [{ 
     "firstName": "John", 
     "lastName": "Doe", 
     "Choices": [ 
      { 
       "Name":"Dinner", 
       "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}], 
       "SelectedOption":{Name:"Chicken",ID:2} 
      }, 
      { 
       "Name":"Lunch", 
       "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}], 
       "SelectedOption":"" 
      } 
     ],   
    }, { 
     "firstName": "Jane", 
     "lastName": "Doe" 
    }]; 
}); 

CSS：

body{ 
    font-family: verdana; 
    font-size: 10pt; 
} 

.listheader{ 
    font-weight: bold; 
    text-decoration: underline; 
    padding-top: 5px; 
} 

fiddle link