AngularJS 1.5显示普通数组的ngOptions比较

Question

谁能告诉我为什么第一个示例中的模型选项被选中，而第二个不用于普通数组:

// 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>

尝试不使用hack，而使用track by代替索引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，因为它是干净的，而不是一个hack将是伟大的。

Answer 1

没有找到使用track by的解决方案，但是AngularJS的Select文档有一个使用解析器和格式化器的解决方案，所以我可以避免使用问题中的hack。我稍微调整了一下，如果键是字符串，它会把它单独留下，否则它会转换它，这似乎行得通。任何批评或问题，我没有看到请评论，否则希望这有助于别人。

(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，不选择初始值。

另外，如果您想让模型值保持为数字(2，而不是"2")，您可以尝试:

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

然而，这可能并不比你的第一个工作示例更"hackish":

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

参见AngularJS的第一个答案ng-option get index.