Question

我在控制器中有一个函数，我从ng-class指令调用它。我的代码正在运行，但我没有得到正确的输出。有些事情是错的，但我无法捕获它，因为我是AngularJS的新手。所以任何人都请看看我的代码并告诉我我犯了什么错误，如果可能的话，请与纠正的代码讨论。

我的代码

<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;
}

在if else逻辑中我正在设置类名$scope.clsName="clsYello";但是在输出中我注意到在html中显示错误的类名。

这是屏幕截图

现在查看第一个数据，其中类名显示 clsGreen ，但在输出 clsRed 中应用。正确的输出将是 clsRed ，并且还应该应用 clsRed 。 clsRed 已应用，但 clsGreen 在输出中显示为不正确的类名。

所以请指导我在哪里弄错了。请指导我纠正的代码。 js fiddle https://jsfiddle.net/tridip/czjo9f1m/8/

感谢

Answer 1

看到这个。如果你使用$ scope.diff作为数组，你可能会发现你的问题是什么。

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>

Answer 2

我认为这是更好的解决方案。

＆＃13;

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);
})

＆＃13;

.clsRed {
  font-weight: bold;
  color: red;
}

.clsYello {
  font-weight: bold;
  color: yellow;
}

.clsGreen {
  font-weight: bold;
  color: green;
}

＆＃13;

<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>

＆＃13;

AngularJS从控制器功能设置数据

我的代码

CSS

这是屏幕截图

2 个答案: