javascript - Need to change color of a cell (angular table) based on the condition -


i trying change class of td element using $scope. im able change class names while running code @ end last class name getting applied table.

service.js

var hostweburl, appweburl; var array1 = [];  //array1 var array2 = [];  //array2 function managequerystringparameter(paramtoretrieve) {  var params = document.url.split("?")[1].split("&"); var strparams = ""; (var = 0; < params.length; = + 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 read records         this.readlist1 = function () {              var deferred = $q.defer();             //get sharepoint context object based upon url             var ctx = new sp.clientcontext(appweburl);             var appctxsite = new sp.appcontextsite(ctx, hostweburl);             var web = appctxsite.get_web(); //get 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 properties of client object server.             ctx.load(items);              //execute 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 sharepoint context object based upon url             var ctx = new sp.clientcontext(appweburl);             var appctxsite = new sp.appcontextsite(ctx, hostweburl);             var web = appctxsite.get_web(); //get 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 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;         (var = 0; <array2.length; i++) {             (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> 


Comments