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

如果用户真的必须输入一个值，一种选择是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 属性（fiddle）设置 value 属性：

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

或角度指令（小提琴）：

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 回答