Question

我有一个用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';

            }

        };

    });

Answer 1

如果用户确实需要输入值，则可以根据required规则添加:invalid html5属性和样式：

/* 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); });

或角度指令（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());
            });
        }
    };
});

如何将其转换为AngularJs指令？

1 个答案: