Question

如何根据使用angularjs的逻辑选择要在悬停中显示的特定文本？例如，我有一个值，如果类等于'warning'我想要一个特定的悬停消息，如果类等于'success'我想要一个不同的悬停消息出现。

我的逻辑是写一个函数，说明如果color = success hover = this，如果color = warning hover = that，如果color = error hover =其他。有什么建议吗？

      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-class中的class属性并显示与该属性相关的消息。

<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;
}

根据AngularJS中的条件将文本应用于悬停

2 个答案:

应用设置（+控制器）

模板

样式