在angularjs中选择下拉项目

时间:2015-11-17 05:15:48

标签: html angularjs drop-down-menu

我已经制作了angularj下拉菜单的演示,并且它的工作正常,但是现在我想让所选项目变为活动状态,我不知道如何做到这一点,任何讨厌请帮助我,我已经使用过{{ 3}}

我的代码如下:

HTML

<span class="toolbar-button--quiet navigation-bar__line-height" style="border: none; padding: 0">
                <i  class="ion-android-more-vertical" dropdown-disabled="isDropdownDisabled" style="font-size: 26px; margin: 0; padding: 0 17px 0 12px;" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" dropdown-disabled="dropdownsDisabled"></i>  
            </span>

JS

  $scope.ddMenuOptions = [
        {
            text: 'Featured',
            code: 'F'
        }, {
            text: 'Name (A-Z)',
            code: 'A'
        }, {
            text: 'Rating',
            code: 'M'
        }, {
            text: ' Most Popular',
            code: 'MP'
        }
    ];

    $scope.ddMenuSelected = {
    };



    $scope.$watch("ddMenuSelected", function(newValue, oldValue) {

        $scope.selectedItem = newValue;
        var result = document.getElementsByClassName("dropdown");
        var wrappedResult = angular.element(result);
        wrappedResult.removeClass('active');
        wrappedResult.addClass('activated');
        if (newValue !== oldValue) {

            console.log("=========" + $scope.ddMenuSelected.code);
            $rootScope.ddMenuOptions = false;

1 个答案:

答案 0 :(得分:1)

将divider设置为true / false

示例:

$scope.ddSelectOptions[1].divider = true;

stackoverflow.com

https://jsfiddle.net/66mrssb7/7/