需要根据条件更改单元格(角度表)的颜色

时间:2015-07-17 03:56:59

标签: javascript html angularjs

我正在尝试使用$ scope更改td元素的类。我可以在运行代码时更改类名,但最后只有最后一个类名应用于表。

service.js

var hostWebUrl, appWebUrl;
var array1 = [];  //Array1
var array2 = [];  //Array2
function manageQueryStringParameter(paramToRetrieve) {

var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
    var singleParam = params[i].split("=");
    if (singleParam[0] == paramToRetrieve) {
        return singleParam[1];
    }
}
}

hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));

appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));

(function (app) {
app.service('spsservice', function ($q) {

        //Function to read all records
        this.readList1 = function () {

            var deferred = $q.defer();
            //Get the SharePoint Context object based upon the URL
            var ctx = new SP.ClientContext(appWebUrl);
            var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
            var web = appCtxSite.get_web(); //Get the Web 
            var list = web.get_lists().getByTitle("List1"); 
            var query = new SP.CamlQuery(); 
            query.set_viewXml('<View></View>');

            var items = list.getItems(query);
            ctx.load(list); //Retrieves the properties of a client object from the server.
            ctx.load(items);

            //Execute the Query Asynchronously
            ctx.executeQueryAsync(
                Function.createDelegate(this, function () {
                    var itemInfo = '';
                    var enumerator = items.getEnumerator();            
                    var ID = 0;
                    while (enumerator.moveNext()) {
                        var currentListItem = enumerator.get_current();
                        array1.push({
                            Name: currentListItem.get_item('Name'),
                            ID: currentListItem.get_item('ID'),
                            Crime: currentListItem.get_item('Crime')
                        });
                    }
                    deferred.resolve(array1);
                }),
                Function.createDelegate(this, function (sender, args) {
                    deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                })
                );
            return deferred.promise;
        };

        this.readList2 = function () {
            var deferred = $q.defer();
            //Get the SharePoint Context object based upon the URL
            var ctx = new SP.ClientContext(appWebUrl);
            var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
            var web = appCtxSite.get_web(); //Get the Web
            var list = web.get_lists().getByTitle("List2"); 
            var query = new SP.CamlQuery(); 
            query.set_viewXml('<View></View>');
            var items = list.getItems(query);
            ctx.load(list); 
            ctx.load(items);

            //Execute the Query Asynchronously
            ctx.executeQueryAsync(
                Function.createDelegate(this, function () {
                    var itemInfo = '';
                    var enumerator = items.getEnumerator();                
                    var ID = 0;
                    while (enumerator.moveNext()) {
                        var currentListItem = enumerator.get_current();
                        array2.push({
                            Name: currentListItem.get_item('Name'),
                            ID: currentListItem.get_item('ID'),
                            Crime: currentListItem.get_item('Crime')
                        });
                    }
                    deferred.resolve(array2);
                }),
                Function.createDelegate(this, function (sender, args) {
                    deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                })
                );
            return deferred.promise;
        };
    });

}(angular.module('spsmodule')));

controller.js

(function (app) {
app.controller('spscontroller', function ($scope, spsservice) {

    load();      
$scope.arr1 = [], $scope.arr2 = []; 
$scope.PerfectMatcharr = [];
var IsUpdate = false;    
function load() {         
        var promiseList1 = spsservice.readList1();

        promiseList1.then(function (resp) {
            var promiseList2 = spsservice.readList2();
            $scope.arr1 = resp;

            promiseHRlist.then(function (resp) {
                $scope.arr2 = resp;
                compareFunc();

            }, function (err) {
                $scope.Message = "Error " + err.status;
            });
        }, function (err) {
            $scope.Message = "Error " + err.status;
        });      

    var compareFunc = function () {
        var ID = 0;
        for (var i = 0; i <array2.length; i++) {
            for (var j = 0; j < array1.length; j++) {
                //Perfect Match
                if ((array1[j].Name === array2[i].Name) && (array1[j].ID ===                                 
                     array2[i].ID))
                {

                    perfectMatch.push(array1[j]);
                    perfectMatch.push(array2[i]);
                    crimeFunc(i, j);
                }

            }
        }
        $scope.PerfectMatcharr = perfectMatch;
    }

    var crimeFunc = function (i, j) {    

        if(GSMA_array[j].Crime === HR_array[i].Crime)
        {           
            $scope.change = "present";
        }
        else
        {            
             $scope.change = "zero";
        }
    } 

}
});
}(angular.module('spsmodule')));

HTML

<div ng-app="spsmodule">

    <div ng-controller="spscontroller">
        <table class="table table-bordered">
            <caption>Perfectly Matched</caption>
            <thead>
                <tr>
                    <th class="c1">Name</th>
                    <th class="c1">ID</th>
                    <th class="c1">Crime</th>
                </tr>
            </thead>
            <tbody>
                <tr class="trset" ng-repeat="Cat in PerfectMatcharr">
                    <td>{{Cat.Name}}</td>
                    <td>{{Cat.ID}}</td>
                    <td ng-class-even="change">{{Cat.Crime}}</td> 
                </tr>
            </tbody>
        </table>
    </div>
</div>

0 个答案:

没有答案