AngularJsのng-modelが値を選択しないのはなぜですか？

Question

私は角度で、この配列があります。

$scope.skins = [ 
    { code : "default", name : "DEFAULT_TXT" }, 
    { code : "aero", name : "AERO_TXT" }, 
    { code : "navy", name : "NAVY_TXT" }, 
    { code : "facebook", name : "FACEBOOK_TXT" }, 
    { code : "turquoise", name : "TURQUOISE_TXT" }, 
    { code : "lime", name : "LIME_TXT" }, 
    { code : "green", name : "GREEN_TXT" }, 
    { code : "purple", name : "PURPLE_TXT" }, 
    { code : "white", name : "WHITE_TXT" }, 
    { code : "concrete", name : "CONCRETE_TXT" }, 
    { code : "watermelon", name : "WATERMELON_TXT" }, 
    { code : "lemonade", name : "LEMONADE_TXT" } 
] 

をそして私はNG-オプションで選択オプションを作成しています。私はいくつかの値でngモデルを設定しましたが、それを選択しません。私は間違っている？ここで

はあなたNG-モデルはオブジェクトに結合するので、それはこの

$scope.opts = {}; 

とtrack byを削除...

Demo

Answer 1

ようにする必要がありJSFiddle

Answer 2

完全な例でありますリストでは、 'code'プロパティではなく、このjavascriptコードを試してみてください。

app = angular.module("myApp", []); 

app.controller('myCtrl', function ($scope, $http) { 
    var defSkin = { code: "white", name: "WHITE_TXT" }; 
    $scope.skins = [ 
     { code: "default", name: "DEFAULT_TXT" }, 
     { code: "aero", name: "AERO_TXT" }, 
     { code: "navy", name: "NAVY_TXT" }, 
     { code: "facebook", name: "FACEBOOK_TXT" }, 
     { code: "turquoise", name: "TURQUOISE_TXT" }, 
     { code: "lime", name: "LIME_TXT" }, 
     { code: "green", name: "GREEN_TXT" }, 
     { code: "purple", name: "PURPLE_TXT" }, 
     defSkin, 
     { code: "concrete", name: "CONCRETE_TXT" }, 
     { code: "watermelon", name: "WATERMELON_TXT" }, 
     { code: "lemonade", name: "LEMONADE_TXT" } 
    ] 

    $scope.opts = []; 
    $scope.opts.sidebarSkin = defSkin; 

}); 

Answer 3

$ scope.optsはオブジェクトではありませんあなたが特定の値を選択するために、NG-選択を使用することができ、アレイ、

$scope.opts = {}; 

DEMO

Answer 4

です。 demo

<div ng-app="myApp"> 
     <div ng-controller="myCtrl"> 

     <select class="form-control" ng-model="opts.sidebarSkin" name="sidebarTemplate" ng-options="skin.code as skin.name for skin in skins" ng-selected="code == opts.sidebarSkin"> 

     </select> 
     </div> 
    </div> 

角度のJsコード

app = angular.module("myApp", []); 

app.controller('myCtrl', function($scope, $http) { 

     $scope.skins = [ 
     { code : "default", name : "DEFAULT_TXT" }, 
     { code : "aero", name : "AERO_TXT" }, 
     { code : "navy", name : "NAVY_TXT" }, 
     { code : "facebook", name : "FACEBOOK_TXT" }, 
     { code : "turquoise", name : "TURQUOISE_TXT" }, 
     { code : "lime", name : "LIME_TXT" }, 
     { code : "green", name : "GREEN_TXT" }, 
     { code : "purple", name : "PURPLE_TXT" }, 
     { code : "white", name : "WHITE_TXT" }, 
     { code : "concrete", name : "CONCRETE_TXT" }, 
     { code : "watermelon", name : "WATERMELON_TXT" }, 
     { code : "lemonade", name : "LEMONADE_TXT" } 
     ] 

     $scope.opts = {}; 
     $scope.opts.sidebarSkin = "white"; 

    });