Question

希望有人可以指出我正确的方向。我目前非常难以理解如何实现以下目标 -

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

当我输入要比较的静态值（在这种情况下为“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函数更新的SEPERATE 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级并比较来自不同firebase数组的值

1 个答案: