Question

我使用div创建了一个列表，当用户从列表中选择一个时，我想只更改div的背景颜色。

目前我通过定义两个不同的css类来完成此操作，唯一的区别是背景颜色，并且当用户选择div时我设置了这种样式。

他们无论如何只改变背景颜色而不影响使用angularJS的现有风格？

Answer 1

我刚刚开始学习AngularJS，所以这对我来说是一种家庭作业。我知道这可能不是干净的方式或者你想要的。看看它是否有意义。如果不让我知道，我很乐意改进。

目前我通过定义两个不同的css类来完成此操作唯一的区别是背景颜色

您可以将背景颜色放入单独的类中，并仅切换该类，保持其他所有内容相同。

<强> HTML

<div ng-app ng-controller="testCtrl" >
  <div ng-repeat="item in items">
    <div ng-class="item.class" ng-click="select(item)">{{item.text}}</div>
  </div>
</div>

<强> JS

function testCtrl($scope) {
  $scope.items = [
    { text:'List item 1', class:'default normal' },
    { text:'List Item 2', class:'default normal' },
    { text:'List Item 3', class:'default normal' }
  ];

  $scope.select = function(item) {
    angular.forEach($scope.items, function (value, key) {
        if(value == item) {
        value.class = 'default select' // selected
      }
      else {
        value.class = 'default normal' // restored
      }
    });
  };
}

<强> CSS

.default { font-size: 25px; padding: 10px; margin-bottom: 5px; }
.normal { background: yellow; }
.select { background: cyan; }

JSFiddle https://jsfiddle.net/po2o8f69/6/

Answer 2

我希望这会对你有所帮助，在点击项目上添加活跃课程

app.controller('MainCtrl', function($scope) {
    $scope.items = [
        'Page One',
        'Page Two',
        'Page Three'
    ];

    $scope.selected = 0;
    $scope.active = function(index) {
        $scope.selected = index;
    }
});



<li ng-repeat="item in items">
            <a ng-class="{ active : $index == selected }" ng-click="active($index)">{{ item }}</a>
        </li>

fiddle

使用AngularJS仅更改div的背景颜色

2 个答案: