AngularJS setting data from controller function

Question

I have a function in controller in which I am calling it from ng-class directive. My code is working but I am not getting right output. Something is wrong but I am not being able to capture it because I am new in AngularJS. So anyone please have a look at my code and tell me what mistake I made and if possible discuss with rectified code.

My code

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li ng-class="setColor(item.businessTime,item.name)" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}} &mdash; {{clsName}} &mdash; {{diff}}</li>
  </ul>
</div>


var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff='';
$scope.clsName='';
$scope.setColor = function(businessTime,name) {

//alert('businessTime '+businessTime);
//alert('dbtime '+$scope.dbTime);

//var diff =$scope.dbTime.diff(businessTime, 'minutes')
//alert(diff);
var _diff=0;
var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(businessTime,"DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);
//alert(d.asMinutes());
_diff=Math.round(d.asMinutes());

     if(_diff.between(-2000, -6000))
     {
            //alert(name+' clsRed '+_diff);
            $scope.diff=Math.round(d.asMinutes());
            $scope.clsName="clsRed";
            return "clsRed";
     }
     else if(_diff.between(-6001, -8000))
     {
            //alert(name+' clsGreen '+diff);
        $scope.diff=Math.round(d.asMinutes());
            $scope.clsName="clsYello";
            return "clsYello";
     }           
     else if(_diff.between(1000, 2000)) 
     {
            //alert(name+' clsYello '+_diff);
        $scope.diff=Math.round(d.asMinutes());
            $scope.clsName="clsGreen";
            return "clsGreen";
     }     

}   
  
  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
        'businessTime':'05/09/2013 15:00:00'
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'04/09/2013 14:20:00'
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
        'businessTime':'06/09/2013 18:12:10'
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
                'businessTime':'07/09/2013 19:22:00'        
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'01/09/2013 09:00:00'
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
        'businessTime':'10/09/2013 07:00:00' 
    }
    ]
})

Number.prototype.between = function(a, b) {
  var min = Math.min.apply(Math, [a, b]),
    max = Math.max.apply(Math, [a, b]);
  return this > min && this < max;
};

css

.clsRed {
  font-weight: bold;
  color: red;
}

.clsYello {
  font-weight: bold;
  color: yellow;
}

.clsGreen {
  font-weight: bold;
  color: green;
}

within if else logic i am setting class name $scope.clsName="clsYello"; but in output i have notice some time wrong class name in showing in html.

here is screen shot

now see the first data where class name is showing clsGreen but in output clsRed is applied. right output would be clsRed and also clsRed should be applied. clsRed has applied but clsGreen is showing as class name in output which is not right.

so please guide me where i made the mistake. please guide me with rectified code. js fiddle https://jsfiddle.net/tridip/czjo9f1m/8/

thanks

Hadi · Accepted Answer · 2016-04-15 11:57:03Z

1

see this. if you use $scope.diff as array probably you find out what is your problem.

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff=[];
$scope.clsName=[];
$scope.setColor = function(businessTime,name) {
var _diff=0;
var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(businessTime,"DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);

_diff=Math.round(d.asMinutes());
  
     if(_diff.between(-2000, -6000))
     {
           
            $scope.diff.push(Math.round(d.asMinutes()));
            $scope.clsName.push("clsRed");
            console.log($scope.diff);
            return "clsRed";
     }
     else if(_diff.between(-6001, -8000))
     {
            
          $scope.diff.push(Math.round(d.asMinutes()));
            $scope.clsName.push("clsYello");
            console.log($scope.diff);
            return "clsYello";
     }           
     else if(_diff.between(1000, 2000)) 
     {
           
         $scope.diff.push(Math.round(d.asMinutes()));
            $scope.clsName.push("clsGreen");
            console.log($scope.diff);
            return "clsGreen";
     } 


}   

  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
        'businessTime':'05/09/2013 15:00:00'
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'04/09/2013 14:20:00'
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
        'businessTime':'06/09/2013 18:12:10'
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
        'businessTime':'07/09/2013 19:22:00'        
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'01/09/2013 09:00:00'
    }
    ];
})

Number.prototype.between = function(a, b) {
  var min = Math.min.apply(Math, [a, b]),
    max = Math.max.apply(Math, [a, b]);
  return this > min && this < max;
};

.clsRed {
  font-weight: bold;
  color: red;
}

.clsYello {
  font-weight: bold;
  color: yellow;
}

.clsGreen {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li  ng-repeat="item in products track by $index"><span ng-class="setColor(item.businessTime,item.name)">{{$index}} &mdash; {{item.price}} &mdash; {{clsName[$index]}} &mdash; {{diff[$index]}}</span></li>
  </ul>
</div>

edited Apr 15, 2016 at 11:57

answered Apr 13, 2016 at 21:13

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Monojit Sarkar Over a year ago

see the first entry in your output then notice clsred has been applied but {{clsName}} class name is showig clsgreen which is not correct. why wrong clsName is showing ? what is wrong in the code. your code output is also showing wrong **clsName **

Hadi Over a year ago

for clsName also use array instead of variable. now class name is display correctly.

Monojit Sarkar Over a year ago

when i code then i add data to scope variable like ` $scope.clsName="clsGreen";` but u always add data to array like $scope.clsName.push("clsGreen"); would u tell me why u take different approach for storing data in array instead of variable?

Hadi Over a year ago

when call function in ng-class it call multiple. see $scope.diff in console. i also add console.log($scope.diff); in your code.

Monojit Sarkar Over a year ago

Sorry your explanation is not at all clear. just do not understand what u try to convey here. i asked why did u store data in array instead in variable the way i did?

Hadi · Accepted Answer · 2016-04-15 13:26:01Z

i think that this is better solution.

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff=[];
$scope.clsName=[];
  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
        'businessTime':'05/09/2013 15:00:00'
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'04/09/2013 14:20:00'
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
        'businessTime':'06/09/2013 18:12:10'
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
                'businessTime':'07/09/2013 19:22:00'        
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
        'businessTime':'01/09/2013 09:00:00'
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
        'businessTime':'10/09/2013 07:00:00' 
    }
    ];
  
  angular.forEach( $scope.products,function(product,i){
      var _diff=0;
      var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(product.businessTime,"DD/MM/YYYY HH:mm:ss"));
      var d = moment.duration(ms);
     _diff=Math.round(d.asMinutes());
      $scope.products[i].diff = _diff;
    
    });
  
  console.log($scope.products);
})

.clsRed {
  font-weight: bold;
  color: red;
}

.clsYello {
  font-weight: bold;
  color: yellow;
}

.clsGreen {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li  ng-repeat="item in products track by $index">
      <span ng-class="{'clsYello':-6000>item.diff,'clsRed':-2000>item.diff,'clsGreen':item.diff > 1000}">{{$index}} &mdash; {{item.price}} &mdash; {{clsName[$index]}} &mdash; {{item.diff}}</span></li>
  </ul>
</div>

Collectives™ on Stack Overflow

AngularJS setting data from controller function

My code

css

here is screen shot

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My code

css

here is screen shot

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related