突出显示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，因为如果我没有选中按钮会搞砸。如果没有这门课，他们将无法维持职位。

Answer 1

$ scope.selected === menu;

不要对物体进行绝对比较。而是比较对象的属性，最好是诸如＆＃39; menuName。＆＃39;

之类的唯一属性