AngularJS中基于条件的文本悬停应用

Question

如何使用angularjs根据逻辑选择出现在悬停中的特定文本？例如，我有一个值，如果这个类等于‘警告’，我想要一个特定的悬停消息，如果这个类等于‘成功’，我希望出现一个不同的悬停消息。

我的逻辑是编写一个函数，该函数的内容是:如果color = says =says，若color = warning error =那个，若color =error error=什么别的什么东西。有什么建议吗？

​

      getColor = function() {
            var data = 88;

            if(data < 75){
                return "losses-success";
            }else
            if(data >=75 && data < 90){
                return "losses-warning";
            }else
            if(data > 90){
                return "losses-error";
            }
        };

.losses-success{
    display: inline-block!important;
    width: 8px;
    height: 20px;
    background-color: green;
}
.losses-warning{
    display: inline-block!important;
    width: 8px;
    height: 20px;
    background-color: yellow;
}
.losses-error{
    display: inline-block!important;
    width: 8px;
    height: 20px;
    background-color: red;
}

<div id="cTotal" class="losses-tooltip" ng-class="getColor()">
  <span class="tooltiptext"> </span>
  <span class="block"><sup>$</sup>
    <strong class="amount">{{loss}}</strong></span>
</div>

​

Answer 1

如果您的类和消息是固定的，我认为最好返回一个带有类和消息的对象：

return {
     ngclass: "losses-success",
     message: "some text"
}

无法在ng类中使用类属性并显示与该属性相关的消息。

<div id="cTotal" class="losses-tooltip" ng-class="getColor().ngclass">
     {{getColor().message}}
</div>

我不太喜欢这种方法，因为getColor()函数是在每个角度循环上调用的。getColor().ngclass语法对我来说似乎很奇怪。

我更喜欢在控制器中设置对象，并在需要时更新值。如果无法控制类和消息何时更新，则可以选择第一种方法。如果您能够控制这一点，您可以简单地：

function getColor(value) {
    //put you logic
    //
    $scope.myObj = {
         ngclass: "anyclass",
         message: "any message"
    }
}

在你的模板中：

<div id="cTotal" class="losses-tooltip" ng-class="myObj.ngclass">
     {{myObj.message}}
</div>

注意，在第二种方法中，您需要调用您的getColor函数来更新myObj中的值，这样您的性能就更好了。

在第一种方法中，每个周期都调用该函数，因此每次更新该值(不需要在控制器中显式调用该函数来更新该值)。因此，在这种情况下，您需要注意应用程序的性能。

Answer 2

我不是真的写Angular.js..。所以这不是最好的方法-我肯定.但这更像是一个如何创建jsFiddle的例子--并在询问之前更多地解决问题：http://jsfiddle.net/sheriffderek/U3pVM/33739/

应用程序设置(+控制器)

var app = angular.module('ExampleApp', [/* no dependencies */]);

app.controller('ExampleCtrl', function($scope) {
  $scope.crapList = [57, 94, 72, 20];

  $scope.getColor = function(inputData) {
    if (inputData > 90) {
      return 'error';
    }
    if (inputData > 70) {
      return 'warning';
    }
    return 'success';
  };
});

模板

<main ng-app="ExampleApp">
  <h1>Example</h1>
  <section ng-controller="ExampleCtrl">

    <ul class="crap-list">
      <li class="crap" ng-class='getColor(crap)'
        ng-repeat="crap in crapList">

        <span>{{crap}}</span>
      </li>
    </ul>

  </section>
</main>

样式

.crap {
  /* display: inline-block!important; 
  if you have to add !important... then you are doing something very wrong further up your style-sheet*/
  /* width: 8px;  what? this is a bad idea */
  /* height: 20px;  the content should determine it's height */
  margin-top: .2rem;
  padding: .5rem;
  display: inline-block;
  margin: 2px;
}
.crap.success {
  background: green;
}
.crap.warning {
  background: orange;
}
.crap.error {
  background: red;
}