1

在 Angular 1.4 中，我使用该指令使用基于如下对象的标签ngOptions填充标签：<select><option>

{black: '#000000', red: '#FF0000', ...}

这很好用ng-options="value as key for (key, value) in vm.colors"，但现在我想为每个匹配键的选项标签添加一个类（例如'.black'，'.red'）。我的想法是简单地找到option元素并使用addClass()，但我在获取这些元素时遇到了麻烦。（注意：我没有使用 jQuery，并且希望避免为此添加它。）

这是一个jsfiddle。

我希望能够将结果绑定$element.find('option')到我的视图模型，然后使用 观看它$scope.$watch('vm.options', function() {...})，但是当我登录vm.options到控制台时，我看到的只是一个空数组。

我在这里使用$scope.$watch不正确吗？有问题$element吗？ngOptions我的控制器无法访问范围内的元素吗？还是我只是犯了一个愚蠢的错误？

任何帮助将不胜感激......在此先感谢！

4

2 回答 2

0

文档非常清楚 DOM 操作应该只在指令中完成。我使用这个经验法则：如果我发现自己想要或需要使用 angular.element，那么我需要一个指令。

在这种情况下，您可以使用内置的 ngStyle 指令：

(function() {
    'use strict';
    
    var hexColors = {
        black : '#000000',
        red   : '#FF0000',
        green : '#00FF00',
        blue  : '#0000FF'
    };
    
    angular.module('sandbox', [])
        .constant('hexColors', hexColors)
        .controller('SandboxController', SandboxController)
    ;
    
    function SandboxController($element, $scope) {
        var vm = this;
        vm.colors = hexColors;
        vm.selected = '#000000';
       
    }
    
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<div ng-app="sandbox" ng-controller="SandboxController as vm">
    <select ng-model="vm.selected" ng-options="value as key for (key, value) in vm.colors"></select>
    <p ng-style="{'background-color': vm.selected, color: 'white'}">Hex: {{ vm.selected }}</p>
</div>

于 2015-06-19T05:28:45.577 回答
0

好的，所以我试图查看返回option元素的函数的结果，但我应该做的是查看返回length属性的函数：$element.find('option').length.

这是一个 jsfiddle，其行为与我最初预期的一样。

最终提示我的线索是代码中的这条注释ngOptions，它提醒我“ngModel 只监视对象身份的变化”。

这回答了我的问题，但正如@jme11 指出的那样，你不能为option元素设置样式，所以它不能帮助我实现我的目标。

但是，这看起来可能：https ://github.com/angular-ui/ui-select

于 2015-06-19T14:29:55.420 回答