如果 ng-class 为真，我如何动态应用 ng-style？答案

【问题标题】：How can I apply ng-style dynamically if ng-class is true?如果 ng-class 为真，我如何动态应用 ng-style？
【发布时间】：2017-03-06 13:01:59
【问题描述】：

.test{color:red;background:blue;}
.test.selected {
position:relative;  left: 100px; padding:10px; background:green;
}

<div ng-style="myStyle" ng-class="{select: x.selected}" ng-click="select(x)" ng-repeat="x in myData" class="test"></div>


$scope.select = function (text) {   
    text.selected = true;
};

$scope.myStyle = {
    'color':'white',
    'font-weight':'bold'
}

当div元素通过使用条件true“选择”了className时，我如何在ng-style中添加'myStyle'。如果 ng-class 条件为真，如何动态应用内联 ng-style？在下面，我可以在调试器中看到添加了类名的内联。现在我的条件为真，我可以看到类名“已选择”（class="test ng-scope selected"），我想要的只是在其为真时添加一个内联 ng-style="myStyle"。

<div ng-class="{select: x.selected}" ng-click="select(x)" class="test ng-scope selected" ng-repeat="x in myData">

【问题讨论】：

标签： angularjs angularjs-ng-click ng-class ng-style

【解决方案1】：

试试这个。

<div ng-style="x.selected && {'color':'white','font-weight':'bold'}"  
    ng-click="select(x)" ng-repeat="x in myData" ></div>

演示

var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
  $scope.data = [
  {
    "id": 100,
    "value": "2452"
  },
  {
    "id": 100,
    "value": "2458"
  },
  {
    "id": 1,
    "value": "2457"
  },
  {
    "id": 1,
    "value": "2459"
  },
  {
    "id": 4,
    "value": "2460"
  },
  {
    "id": 5,
    "value": "3458"
  }
];

$scope.select = function(x){
  x.selected = !x.selected;
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<div ng-style="x.selected && {'color':'red','font-weight':'bold'}"  
    ng-click="select(x)" ng-repeat="x in data" >
      {{x.value}}
    </div>

</div>

【讨论】：

【解决方案2】：

不要对所选项目使用 ng-style，您可以使用 ng-class(推荐)

风格

.selected {
 'color':'white',
 'font-weight':'bold'
}

HTML

<div ng-class="{'selected': x.selected}" ng-click="select(x)" ng-repeat="x in myData" ></div>

控制器

$scope.select = function(x){
  x.selected = !x.selected;
}

【讨论】：

我正在使用内联样式，因为我想为内联样式分配动态值，例如 (screen.width/2, document.body.clientHeight/4) 我无法通过 css 分配。