2017-01-18 11 views
1

私が持っている以上、このコード:を選択し、NGリピートして、NG-モデルの現在の値が表示されない

事は、NG-モデルの現在値が(前にもオプションが選択されている

<select ng-model = "vm.modulo.nomenclatura" class="form-control" required> 
<option></option> 
<option ng-value="modulo.key" ng-repeat="modulo in vm.availableModulos">{{modulo.value}}</option> 
</select> 
)、現場には現れません。それは空白です。誰かが助けてくれましたか? はありがとう

+0

([AngularJSとngのリピートと選択の初期化]の可能性のある重複http://stackoverflow.com/questions/18647098/initializing-select-with-angularjs-and-ng-繰り返し) –

+0

同じ問題ですが、試しましたが動作しませんでした:( –

答えて

0
あなたは ng-optionsを使用しての代わりに、このフィドルアウトオプションに チェックを繰り返すべきである

からhttps://plnkr.co/edit/XpgXNOPjC9ZJ8lYuPhGP?p=preview

angular.module("sampleApp", []) 
    .controller("sampleController", function() { 

    var vm = this; 
    vm.availableModulos = [ 
     {value: "Value 1"} 
     {value: "Value 2"}, 
     {value: "Value 3"}, 
     {value: "Value 4"}, 
     {value: "Value 5"} 
    ];   
    vm.modulo = {nomenclatura: vm.availableModulos[2]};  
    }); 

<body data-ng-controller="sampleController as vm"> 
    {{vm.modulo.nomenclatura}} 
    <select ng-model = "vm.modulo.nomenclatura"  class="form-control" required ng-options="mod as mod.value for mod in vm.availableModulos"> 
     <option></option> 
     </select> 
    </body> 
+0

動作しません:( –

+0

@PedroFernandes - 私は完全なコードを追加しました。 – Developer

0

角度selectタグを使用する際のベストプラクティスはNGリピート内部オプションをng-optionsを使用してではなく、使用しています。 angular ng-optionsとtrack by式を使用して、モデル値を追跡します。キーでトラックとして提供される一意のIDフィールドが必要です。 Thng-modelは、トラック単位で初期化されます。

ここにデモがあります。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl as vm"> 
 
     <select ng-model="vm.modulo.nomenclatura" class="form-control" required ng-options="option.value for option in vm.availableModulos track by option.id"> </select> 
 
    </div> 
 

 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function ($scope, $timeout) { 
 
      var _self = this; 
 
      _self.availableModulos = [ { value: "Value 1", id: 0 }, 
 
            { value: "Value 2", id: 1 }, 
 
            { value: "Value 3", id: 2 }, 
 
            { value: "Value 4", id: 3 }, 
 
            { value: "Value 5", id: 4 } 
 
         ]; 
 
      _self.modulo = { 
 
       nomenclatura: _self.availableModulos[2] 
 
      }; 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

関連する問題