Ng-стиль с условием

Как я могу применить стиль к некоторому элементу в списке, который соответствует указанному условию:

        <div data-ng-repeat="item in items">
           <div data-ng-style="{'background' : 'red' : item.selected}> {{item.name}}
           <div> 
        <div>

Как можно применить этот стиль к выбранному элементу.

Ответ 1

Я думаю, было бы лучше использовать ng-class для вашей проблемы. Затем вы создаете новый класс для красного фона, например:

<style>
    .red-background{
        background-color: red;
    }
</style>

И затем используйте этот класс в соответствии с условием:

<div data-ng-class="{'red-background':item.selected}">{{item.name}}</div>

(не забудьте одинарные кавычки вокруг имени класса, их легко упустить)

Ответ 2

Попробуйте этот код,

  <div data-ng-repeat="item in items">
       <div data-ng-style="item.selected && {'background-color':'red'}"> 
           {{item.name}}
       <div> 
    <div>

Ответ 3

См. ниже

function simpleController($scope) {
    $scope.items = [

    {
        selected: false,
        name: 'first'
    }
,
       {
        selected: true,
        name: 'second'
    }
    ];
}

.red
{
background:red}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
    
    <body ng-controller="simpleController">
      <div data-ng-repeat="item in items">
           <div ng-class="{'red' :  item.selected}"> {{item.name}}
           <div> 
        <div> 
  
  </body>

</html>

Ответ 4

По иронии судьбы, я просто посмотрел на это, правильная вещь состоит в том, чтобы явно использовать классы, поскольку они разработаны в них.

Однако вы можете делать условные выражения благодаря возможности JavaScript возвращать последнее значение с помощью &&

<div ng-style="conditional && { 'background' : 'red' } || !conditional && { 'background' : 'green' }"> show me the background </div>

Ответ 5

Вы можете использовать этот метод, описанный ниже здесь. (пример ниже)

angular.module('app', []); 
function myCtrl($scope){
   $scope.items = [
     { name: 'a', selected: 'false' },
     { name: 'b', selected: 'true' }
   ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<html ng-app>
  <body ng-controller="myCtrl">
    <div ng-repeat="item in items">
      <div ng-style="{color: {true:'red'}[item.selected]}">{{item.name}}</div>
    </div>
  </body>
</html>

Ответ 6

ng-style="{'background': (desktop) ? '#ffffff' : ''}"

Объяснение: {CssProperty: Условие? если условие равно True: если условие False}

CssProperty: значение фона, цвета, размера шрифта и т.д.

Условие: точно так же, как a If statment..

после: определить значение свойства для истинного и ложного условия. для CssProperty.

здесь мы не имеем значения, если условие ложно.

любое истинное или ложное значение должно быть правильным значением для CSSProperty. Так что для фона это #ffffff или белый.