ngModelの値を表示しない角度でカスタムを選択

Question

私は角度（1）をかなり新しくしており、問題が発生しました。私はいくつかの場所に表示される、私のアプリでカスタム年のピッカーが必要です。元のコードは

HTML

<select id="yearpicker" ng-model="vm.film.release" required="true" class="form-control"> 
    <option disabled="" selected="" value="">Choose one... </option> 
    <option disabled="">___________________</option> 
    <option value="Unknown">Release Year Unknown</option> 
    <option disabled="">___________________  </option> 
</select> 

年は不明であった年間の提示とフィールドし1900年からすべての年で私に素敵なドロップダウンを与えたJS

<script> 
    for (i = new Date().getFullYear(); i > 1900; i--) 
    { 
     $('#yearpicker').append($('<option />').val(i).html(i)); 
    }; 
</script> 

ました。しかし、コードはページ上にありました。これは非常にうまくありません。つまり、エラーが多く発生する角度の前にjqueryをロードしなければならず、コードがいくつかの場所で繰り返されていました。私はコードを取り出し、それを指示文に入れました。私はそれを繰り返す必要はなかったので、まず角度をつけてエラーを取り除くことができました。これは私がそう

指令JS

angular 
.module('myapp') 
.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 
    return { 
     restrict: 'AE', 
     scope: { 
      bindModel: '=ngModel' 
     }, 
     controller: function() { 
      for (i = new Date().getFullYear(); i >= 1900; i--) { 
       $('#yearpicker').append($('<option />').val(i).html(i));      
      }; 
     }, 
     templateUrl: '/common/directives/customYearpicker/customYearpicker.template.html' 
    }; 
}; 

HTMLテンプレート

<select id="yearpicker" ng-model="bindModel" class="form-control"> 
    <option value="">Choose one... </option> 
    <option disabled="">___________________</option> 
    <option value="Unknown">Release Year Unknown</option> 
    <option disabled="">___________________  </option>  
</select> 

のように行なったし、私はこれがどこを除いて、どこでも正常に動作しますので、

<custom-yearpicker name="release" ng-model="vm.record.release" required="true"></custom-yearpicker> 

のようにそれを呼んでいますレコードを編集したい場合、selectはもはや 'vm.record.release'の値ではなくなり、空白になります。 'vm.record.release'は正しい値を持っています。ドロップダウンリストには表示されませんが、他のすべてのインスタンスと同様に、どちらかを選択してください。これとは別に年賀状はうまくいきますが、これは修正が必要です。

誰もが私が作った（最も可能性が高い）紛れも明白な失態を指摘し、または私はそれ間違ってすべてをやっている場合は、正しい方向に私を指すことができる場合は、それははるかに高く評価されるだろう。

ありがとうございました。

UPDATE

のでNG-オプションを使用することをお勧めされた後、私は今これに私のディレクティブを更新しました：これまで

angular 
.module('myapp') 
.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 

    return { 
     restrict: 'AE', 
     scope: { 
      bindModel: '=ngModel' 
     }, 
     controller: function ($scope) { 
      $scope.selectOptions = [ 
       { name: '', text: 'Choose one... ' }, 
       { name: '', text: '___________________' }, 
       { name: 'Unknown', text: 'Release Year Unknown' }, 
       { name: '', text: '___________________' }, 
      ]; 

      for (i = new Date().getFullYear(); i >= 1900; i--) { 
       // $('#yearpicker').append($('<option />').val(i).html(i)); 
       var newOpt = { name: i, text: i}; 
       $scope.selectOptions.push(newOpt);     
       }; 

       console.log($scope.selectOptions); 
       return $scope.selectOptions; 
     },   
     templateUrl: "/common/directives/customYearpicker/customYearpicker.template.html" 
    }; 
    }; 

とHTMLテンプレートを：

<select id="yearpicker" ng-model="bindModel" ng-options="option.name as option.text for option in selectOptions" class="form-control"> </select> 

と

<custom-yearpicker name="release" ng-model="vm.record.release" required="true"></custom-yearpicker> 

：私はこのようにそれを呼び出しています

問題は以前と同じように動作しますが、無効になっているオプションは無効にならず、yearpickerはまだvm.record.releaseの値を表示していないことです。セレクタから値を選択した場合、問題なくエディットコントローラが選択しますが、何らかの理由でセレクタで値が選択されません。まだ提案を探してください。あなたのアプリをブートストラップする場合

Answer 1

、あなたは依存関係を宣言する必要があります。存在しない場合は、空の配列を使用します。

var app = angular.module('myapp', []); 
app.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 
    return { 
    restrict: 'AE', 
     scope: { 
     bindModel: '=ngModel' 
     }, 
     controller: function() { 
     for (i = new Date().getFullYear(); i >= 1900; i--) { 
      $('#yearpicker').append($('<option />').val(i).html(i));      
     }; 
     }, 
     template: `<select id="yearpicker" ng-model="bindModel" class="form-control"><option value="">Choose one... </option><option disabled="">___________________</option><option value="Unknown">Release Year Unknown</option><option disabled="">___________________  </option></select>` 
    }; 
}; 

お知らせ私が最後にtemplate代わりの便宜のためにtemplateUrlを使用しますが、あなたのtemplateUrlが動作するはずです。

また、これは選択を作成する角度的方法ではありません。 look into ngOptionsをお願いします。

Answer 2

このようなことにjQueryを使用しないでください。

ディレクティブコード：

function customYearSelect(){ 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=ngModel', 
     name: '@', 
     yearFrom: '@', 
     yearTo: '@' 
    }, 
    templateUrl: 'custom-year-select.template.html', 
    link: function (scope,element,attr) { 
     var yearFrom = attr['yearFrom'] ? attr['yearFrom'] : 1990; 
     var yearTo = attr['yearTo'] ? attr['yearTo'] : new Date().getFullYear();  
     scope.yearArray = []; 
     for(var i = yearTo; i >= yearFrom; i--){ 
     scope.yearArray.push(i); 
     } 
    }  
    } 
} 

テンプレート：

<select name="custom-year-selet" ng-model="model" ng-options="name + ' ' + year for year in yearArray"> 
     <option name="selectYear" value="" style="display:none">-- select year --</option> 
    </select> 

HTML：

<custom-year-select name="Release year:" ng-model="selectedYear2" 
    year-from="2000" year-to="2005"></custom-year-select> 

はここで働いてjsfiddleです：http://jsfiddle.net/kvda7Lc7/

Answer 3

[OK]を、私はそれを考え出しました。結局それはちょうど私がちょっとしたドーピーだったのですが、修正は次のとおりでした：

for (i = new Date().getFullYear(); i >= 1900; i--) { 
      // $('#yearpicker').append($('<option />').val(i).html(i)); 
      var newOpt = { name: String(i), text: String(i) }; 
      $scope.selectOptions.push(newOpt);     
      }; 

私はちょうど日付を解析する必要がありました！

とにかく助けてくれてありがとう、私は今、いくつかの奇妙なjqueryハックの代わりに、角度のあるやり方で指示を出しています。

私は右のトラックホルヘに私を設定していただきありがとうございます。