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 はオブジェクト ID の変更のみを監視する」ことを思い出させてくれました。

それは私の質問に答えますが、@ jme11が指摘したように、option要素のスタイルを設定できないため、目標を達成するのに役立ちません。

ただし、これは次のように見えます: https://github.com/angular-ui/ui-select

于 2015-06-19T14:29:55.420 に答える