Ng-class 并比较来自不同 firebase 数组的值

Question

希望有人能指出我正确的方向。我目前对如何实现以下目标感到非常困惑 -

我正在尝试在 ng-repeat 中使用 ng-class 有条件地应用 bootstrap 背景色 class.

非常简单，当我输入一个静态值进行比较时效果很好（在本例中为“25”）-

在控制器中。数据来自 Firebase。数据结构如下 -

"myDatabase": { "someNumber":"12" }

"myOtherDatabase": { "compNumber":"30" }


var ref = new Firebase(my-first-firebase-url); 
$scope.data = $firebase(ref);

var ref2 = new Firebase(my-second-firebase-url);
$scope.data2 =$firebase(ref2);

在视图中 -

<div ng-repeat="item in data" ng-class="{'bg-info' : item.someNumber > 25}"> {{item.someNumber}} </div>

不过，我想从我正在使用单独的 $watch 函数更新的单独的 firebase 对象中动态提取比较值。显然以下方法不起作用，但我怎样才能达到预期的结果...

<div ng-repeat="item in data" ng-class="{'bg-info' : item.someNumber > data2.compNumber}"> {{item.someNumber}} </div>

非常感谢任何帮助！！

Answer 1

我会在 $scope 中创建一个函数来生成要插入到 HTML 中的类。我总是喜欢在 JS 部分有这种逻辑，在这种特定情况下特别重要，因为你需要先将你的值从字符串转换为数字。

这是一个小例子：

angular.module('webapp', [])
    .controller('dummyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
        $scope.data = [{
                value: '1'
            },
            {
                value: '40'
            },
            {
                value: '20'
            },
            {
                value: '10'
            },
            {
                value: '50'
            },
            {
                value: '20'
            }
        ];

        $scope.threshold = 30;

        $scope.getClass = function(item) {
            return {
                'bg-info': Number(item.value) > $scope.threshold
            };
        };
    }]);

.bg-info { 
  background-color: red;
}

<!DOCTYPE html>
    <html ng-app="webapp">
        <head>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
        </head>
        <body ng-app="webapp">
            <div ng-controller="dummyCtrl">
                <div ng-repeat="item in data" ng-class="getClass(item)"> {{item.value}}</div>
            </div>
        </body>
    </html>

Ng-class 并比较来自不同 firebase 数组的值

Ng-class and comparing values from different firebase arrays

angularjs

ng-class