0

ng-options を入力している選択リストがあります。リストには実際の「プレースホルダー」属性がないため、「プレースホルダー」のように機能する「デフォルト」の選択項目もあります。

ただし、私が達成したかったのは、選択リストの残りのすべてのオプションよりも最初の (プレースホルダー値) だけを明るいフォントの色にすることでした。もっている。

私はこれを機能させましたが、ディレクティブを書きませんでした。このコードをディレクティブに移植して、「Angular Way」に準拠し、サイト全体で再利用できるようにしたいと考えています。

どんな助けでも本当に感謝します! コードについては以下を参照してください。

HTML:

<select  
    ng-model="priority"
    id="priority" name="priority"
    class="span7"
    required
    ng-options="p.Description for p in priorities"
    ng-class="appliedClass()">

    <option value="" selected>select priority</option>

</select>

CSS:

.select-placeholder {
    color: #999;
}

JS:

    /*
        Watches the 'priority' select list for changes
    */
    $scope.$watch('priority', function(value) {

        // value of the <option> element from the select list
        var selectedValue = value;

        // applies the 'select-placeholder' css class to ng-class
        // if the selected item is the default (placeholder) item.
        $scope.appliedClass = function() {

            if (selectedValue === undefined) {
                return 'select-placeholder';

            }

        };

    });
4

1 に答える 1

1

ユーザーが実際に値を入力する必要がある場合の 1 つのオプションは、ルールrequiredに基づいて html5 属性とスタイルを追加することです。:invalid

/* style based on invalid */
select:invalid { color: red }

/* so drop-down items don't inherit color */
select:invalid option { color: black; }

html:

<select required>

値に基づいて CSS でスタイリングをすべて行うことができますが、value プロパティが変更されたときに value 属性が設定されません。

/* style based on value */
select[value=""] {
    color: #aaa;
}

/* so drop-down items don't inherit color */
select option {
    color: black;
}

/* if you want the style in the drop-down list too */
select option:nth-child(1) {
    color: #aaa;
}

jQuery を使用して value プロパティに基づいて value 属性を設定できることを修正するには ( fiddle ):

$('#priority').attr("value", $('#priority').val())
    .change(function() { $(this).attr("value", this.value); });

または角度ディレクティブ ( fiddle ):

app.directive("setValueAttribute", function() {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            element.attr('value', element.val());
            element.on('change', function(e) {
                var that = angular.element(this);
                that.attr('value', that.val());
            });
        }
    };
});
于 2013-06-07T21:03:31.567 に答える