Question

在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，并且希望避免为此添加它。）

Here is a jsfiddle.

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

我在这里错误地使用$scope.$watch吗？这是$element的问题吗？ ngOptions范围内的元素是否无法从我的控制器中访问？或者我只是犯了一个愚蠢的错误？

任何帮助都将非常感谢...提前感谢！

Answer 1

docs非常明确，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>

Answer 2

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

Here is a jsfiddle表现得像我原先预期的那样。

最终让我失意的线索是ngOptions代码中的this comment，这提醒我＆＃34; ngModel只会监视对象标识更改＆＃34;。

这回答了我的问题，但正如@ jme11指出的那样，你不能设定option个元素，这样它就无法帮助我实现目标。

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

AngularJS：为什么$ element.find（'option'）在使用ng-options时返回一个空数组？

2 个答案: