AngularJS 1.5 ngOptions最初の例では、モデルのオプションが選択されている理由

Question

は誰も私を伝えることができるプレーンアレイを表示するための比較、2つ目はない、普通の配列のために行います。

// Plain old array 
vm.owner = ['example', 'example2', 'example3', ...]; 

モデルvm.model.address.owner = 2;

// EXAMPLE 1 - Works 
// Force index to be a number: using id*1 instead of it being a string: 
// and the option ('example3') is selected based on the model value of 2 
// indicating the index 
<select id="owner" 
     name="owner" 
     placeholder="Residential Status" 
     ng-model="vm.model.address.owner" 
     ng-required="true" 
     ng-options="id*1 as owner for (id, owner) in vm.owner"> 
    <option value="">Select Value</option> 
</select> 

ハックを使用しないしようと代わりにインデックス2に値がまだモデルに設定されていても選択されないことにより、トラック。

// EXAMPLE 2 - Doesn't Work 
// Markup doesn't show value to be a string: using track by, but the 
// option set in the model doesn't cause the option to be selected it 
// remains as the default with a value of '' 
<select id="owner" 
     name="owner" 
     placeholder="Residential Status" 
     ng-model="vm.model.address.owner" 
     ng-required="true" 
     ng-options="owner for (id, owner) in vm.owner track by id"> 
    <option value="">Select Value</option> 
</select> 

私はハックは素晴らしいことだクリーンではないのでngOptionsはとても例2のための任意の説明や解決策スーパー混乱であることがわかりました。

Answer 1

track byを使用して解決策が見つかりませんでしたが、SelectのAngularJS docsにはパーサとフォーマッタを使用したソリューションがありましたので、問題のハックを使用することから離れることができます。私は少しそれを微調整したので、キーが文字列だった場合はそれをそのまま残すでしょう、そうでなければそれを変換し、これは動作するようです。私が見ていない批評や批判はコメントしてください。

(function() { 

    'use strict'; 

    /** 
    * Binds a select field to a non-string value via ngModel parsing and formatting, 
    * which simply uses these pipelines to convert the string value. 
    * @constructor 
    * @ngInject 
    * --- 
    * NOTE: In general matches between a model and an option is evaluated by strict 
    * comparison of the model value against the value of the available options. 
    * Setting the option value with the option's "value" attribute the value 
    * will always be a "string", which means that the model value must also 
    * be a string, otherwise the select directive cannot match them 
    * reliably. 
    */ 
    function selectConvertKey(_) { 

     return { 
      require: 'ngModel', 
      link: function ($scope, $element, $attrs, $ctrl) { 

       var ngModelCtrl = $ctrl; 

       // Do nothing if no ng-model 
       if (!ngModelCtrl) { 
        return; 
       } 

       // --- 
       // PRIVATE METHODS. 
       // --- 

       /** 
       * Convert the key to a number if the key is a number. 
       * @param key 
       * @returns {Number} 
       * --- 
       * NOTE: Using Number() instead of parseInt() means that a string 
       * composed of letters and numbers, and start with a number will 
       * not be converted. 
       */ 
       function selectConvertKeyParser(key) { 

        var keyAsNumber = Number(key); 

        // Check if the key is not a number 
        if(_.isNaN(keyAsNumber)) { 
         return key; 
        } 

        return keyAsNumber; 
       } 

       /** 
       * Convert the key to a string. 
       * @param key 
       * @returns {string} 
       */ 
       function selectConvertKeyFormatter(key) { 
        return '' + key; 
       } 

       // --- 
       // MODEL PROPERTIES. 
       // --- 

       /** 
       * Formatters used to control how the model changes are formatted 
       * in the view, also known as model-to-view conversion. 
       * --- 
       * NOTE: Formatters are not invoked when the model is changed 
       * in the view. They are only triggered if the model changes 
       * in code. So you could type forever into the input, and 
       * the formatter would never be invoked. 
       */ 
       ngModelCtrl.$formatters.push(selectConvertKeyFormatter); 

       /** 
       * Parsers used to control how the view changes read from the 
       * DOM are sanitized/formatted prior to saving them to the 
       * model, and updating the view if required. 
       */ 
       ngModelCtrl.$parsers.push(selectConvertKeyParser); 
      } 
     }; 
    } 

    selectConvertKey.$inject = [ 
     '_' 
    ]; 

    angular 
     .module('app') 
     .directive('selectConvertKey', selectConvertKey); 

})(); 

Answer 2

はい、選択肢が文字列以外の値にバインドされている可能性があります。次の操作を行うと、動作します。

//controller 
vm.model.address.owner = "2" 

//html 
ng-options="id as owner for (id, owner) in vm.owner" 

Angularjs ng-options using number for model does not select initial valueを参照してください。あなたよりも任意の少ない「ハック」ではないかもしれないこと、しかし

ng-options="vm.owner.indexOf(owner) as owner for (id, owner) in vm.owner" 

：あなたは数としてモデル値のままにしたい場合は

また、（2、ではない「2」）あなたはこれを試すことができます最初の例：

ng-options="id*1 as owner for (id, owner) in vm.owner"> 

最初の回答はAngularJS ng-option get indexです。