突出显示从一个模型跳到另一个模型的 ng-model

Question

我有 5 个按钮。当我快速点击不同的按钮时，有时即使我不点击它，之前高亮的按钮也会再次高亮。

在我的控制器中

$scope.selectSidebarMenu = function(menu) {
    $scope.selected = menu;
};

$scope.isSelected = function($event, menu) {
    return $scope.selected === menu;
};

// Initialize variables
$scope.activateTransparent = false;

$scope.sidebarMenus = [
  { menuName : 'Button 1', width : 'medium-6', icon : 'fi-page-add'},
  { menuName : 'Button 2', width : 'medium-6', icon : 'fi-page-edit'},
  { menuName : 'Button 3', width : 'medium-6', icon : 'fi-page'},
  { menuName : 'Button 4', width : 'medium-6', icon : 'fi-page'},
  { menuName : 'Button 5', width : 'medium-12', icon : 'fi-page'}
];

在我的模板中

<div class="row page">
    <div class="small-12 large-4 columns sidebar">
        <div class="row">
            <a ng-repeat="menu in sidebarMenus" class="{{menu.width}} columns menu-item button" ng-click="selectSidebarMenu(menu)">
                <div class="text-center">
                    <i class="show-for-large-up {{menu.icon}} size-36"></i>
                    <p class="size-12">{{menu.menuName}}</p>
                </div>
                <div class="disableBottomBorder" ng-class="{ enableBottomBorder : isSelected(menu) }"></div>
            </a>
        </div>
    </div>

    <div class="small-12 large-8 columns content">
        <h3>Content</h3>
        <p>Content goes in here</p>
    </div>
</div>

在我的 css

.disableBottomBorder {
    border-bottom: solid 4px $primary-color;
    width: 100%;
    display: inline-block;
    position: relative;
    bottom: -21px;
    opacity : 0;
}

.enableBottomBorder {
    border-bottom: solid 4px $primary-color;
    width: 100%;
    display: inline-block;
    position: relative;
    bottom: -21px;
    opacity : 1;
}

我实际上想做的是在我单击的按钮上放置一个底部边框，以显示它当前处于选中状态。我实际上遵循了这个 jsfiddle 上写的实现 - http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

我添加了 disableBottomBorder，因为如果我不这样做，按钮在被选中时会变得混乱。没有这个 class.

他们将无法保持地位

Answer 1

$scope.selected === 菜单；

不要对对象进行绝对比较。相反，比较对象的属性，最好是像 'menuName.'

这样的独特属性

突出显示从一个模型跳到另一个模型的 ng-model

highlighted ng-model jumping from one model to another

angularjs

angularjs-ng-click

angular-ngmodel

在我的控制器中

在我的模板中

在我的 css