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>

即使仍然在模型中设置了值，也不会选择尝试不使用黑客并使用跟踪代替索引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文档有一个使用解析器和格式化程序的解决方案，所以我可以摆脱使用问题中的黑客攻击。我调整了一下，所以如果键是一个字符串，它将不管它，否则它转换它，这似乎工作。任何批评或问题我都不会发表评论，否则希望这有助于某人。

(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

是的，问题似乎是select被绑定到非字符串值。如果您执行以下操作，它将起作用：

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

此外，如果您想将模型值保留为数字（2，而非“2”），您可以尝试：

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

但是，这可能不比你工作的第一个例子更“苛刻”：

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

请参阅AngularJS ng-option get index的第一个答案。

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

2 个答案: